Open3
Stencil触る
Web Componentsが気になっているのでStencil触る。
コンポーネント。
import { Component, Prop, h } from '@stencil/core';
import { format } from '../../utils/utils';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
@Prop() first: string;
@Prop() middle: string;
@Prop() last: string;
private getText(): string {
return format(this.first, this.middle, this.last);
}
render() {
return <div>Hello, World! I'm {this.getText()}</div>;
}
}
@Component
decoratorでcustom elementsとしてのタグ、スタイルシート、shadow domを入れる。@Prop
decoratorでPropであることを主張。Propは変更時にレンダーを誘発する。