stencil示例

stencil是一个web components开发框架。

pnpm create stencil

my.counter.tsx:

import { Component, h, Prop, State } from "@stencil/core";

@Component({
	tag: "my-counter",
	styleUrl: "my-counter.css",
	shadow: true,
})
export class MyCounter {
	@Prop() count: number;
	@State() counter = 0;

	componentWillLoad() {
		if (this.count) {
			this.counter = this.count;
		}
	}

	render() {
		const styles = {
			color: "red",
		};
		if (this.counter >= 0) {
			styles.color = "green";
		} else {
			styles.color = "red";
		}

		return (
			<div>
				<button
					onClick={() => {
						this.counter--;
					}}
					type="button"
				>
					-
				</button>
				The counter is: <span style={styles}>{this.counter}</span>
				<button
					onClick={() => {
						this.counter++;
					}}
					type="button"
				>
					+
				</button>
			</div>
		);
	}
}