Custom Element
独自のHTMLタグを定義できる
JSのclassを使って定義する
web標準なので、素のJSで完結する
例 ref
JSのclassを使って定義する
jsclass MyButton extends HTMLElement {
constructor() {
super();
this.innerHTML = `
<style>
button {
border: none;
border-radius: 3px;
padding: 10px 20px;
}
</style>
<button type="button">${this.innerHTML}</button>
`;
}
}
customElements.define("my-button", MyButton);装飾したbuttonをCustom Elementとしている
HTML上で呼び出せる
html<my-button>hoge</my-button>devtool上でもCustom Elementとして表示される
ちゃんとcustom elementのまま表示される
>#WIP
雑に言えば
ReactのComponentのようなものを、素のJSのみで定義できる
ReactのComponentの方ができることが多すぎるので、この表現はめちゃくちゃ語弊があると思うけど、雑なイメージではそう
というか、ReactのComponentと比べてどこが劣っているのかをあまり理解していない
そもそも比較するべきものでもないのかもしれない
Reactよりは命令的な印象がある
classの使用を強制されるのもあまり好きじゃないな
閉じているので、OOP感はまったくないので、よく考えればそんな問題じゃないか
素のHTMLでは、classを使い回すことで、styleを汎用化させていた
が、これをCustom Elementとして使い回すことができる
これってWeb Components独自の用語？
Web Componentsに内包される概念？
それとも、ただWeb Components利用されているだけで、独立の概念？
onClicke={()=>{}} みたいに外部から関数を渡すことはできない？lifecycleがある
constructor()
componentDidMount的
componentWillUnmount的