Custom Elements とは？

Custom Elementsはブラウザが定義を登録して扱うHTML要素だよ。Reactコンポーネントとは仕組みが違うけど、Reactからカスタム要素を表示することもできる。共有するときは、接続先の属性・プロパティ・イベントの扱いも確認しよう。

独自タグを作る例では、HTMLElementを継承したクラスを定義して、customElements.define("my-component", MyComponent)で登録するよ。HTMLでは<my-component></my-component>と書ける。名前は小文字で始まりハイフンを含むなど、仕様の命名規則に従うんだ。

代表的にはconnectedCallbackが文書への接続、disconnectedCallbackが切断、adoptedCallbackが別の文書への移動に対応する。attributeChangedCallbackはobservedAttributesで指定した属性を監視するよ。接続は繰り返されることがあるし、状態を保つ移動ではconnectedMoveCallbackを使う仕組みもあるんだ。

登録するだけでは付かないよ。通常のDOMを使う実装もできる。内部のDOMやスタイルを分けたい場合には、attachShadow()などでShadow DOMを組み合わせるんだ。スタイルを分けることと、外部のコードから秘密を守ることは別だよ。

Litは更新に反応するプロパティやテンプレートなどを備えたライブラリ。StencilはTypeScriptやJSXからカスタム要素を生成するコンパイラだよ。標準の仕組みを直接使うこともできる。作るものや配布先、フレームワークとの接続方法に合わせて選ぼう。