Web Componentsを試す

Web Componentsはカスタム要素を生成するためのWeb標準の技術です。

フレームワークを使わずとも、HTML、CSS、JavaScriptだけでカプセル化されたコンポーネントを生成できます。

実装例

※1 HTMLにカスタム要素を配置します。

※2 Web Components化するべくHTMLElementを継承したクラスをつくります。

※3 shadowRoot()メソッドを使用してShadow DOMをつくります。

※4 connectedCallback()メソッドにてカスタム要素の内部要素を定義します。内部要素の定義方法はいろいろありますが、実装例ではshadowRootのinnerHTMLに書き込んでいます。

※5 customElements.define()メソッドでカスタム要素を定義します。

Web Componentsのよいところは、カスタム要素の中身が他の要素とは独立（カプセル化）していることです。

カスタム要素として独立しているので、外部の影響を受けず、また外部に影響を与えません。

カスタム要素

その名の通り独自の要素を定義できます。

カスタム要素を登録するためにはcustomElements.define()メソッドを使用します。

customElements.define()メソッドの第一引数にカスタム要素の名前、第二引数にカスタム要素のクラスを指定します。

なおカスタム要素には2種類あります。

自律カスタム要素（Autonomous custom element）

既存のHTML要素を継承しないカスタム要素です。

HTMLElementを継承することで生成します。

命名規則があり、<example-element>のようにケバブケースで記述します。

カスタマイズされた組み込み要素（Customized built-in element）

HTMLParagraphElementやHTMLInputElementなど既存のHTML要素を継承するカスタム要素です。

is属性を使用して生成します。

ライフサイクルコールバック

カスタム要素のクラスにはコールバックを定義できます。

connectedCallback(): カスタム要素がドキュメントに追加されたときに呼び出されます。

disconnectedCallback(): カスタム要素がドキュメントから削除されたときに呼び出されます。

attributeChangedCallback(): カスタム要素の属性が変更されたときに呼び出されます。

シャドウDOM

Web Componentsで要素をカプセル化させるための仕組みがシャドウDOMです。

シャドウDOMを使用することで、カスタム要素の中身を他の要素とは独立させることができます。

シャドウDOMをつくるにはattachShadow()メソッドを使用します。

attachShadow()メソッドの引数のmodeにはopenまたはclosedを指定します。

シャドウルートへの操作をopenなら可能に、closedなら不能にします。

シャドウDOMの関連用語

シャドウホスト: シャドウDOMを持つ要素

シャドウツリー: シャドウDOMの内部のDOMツリー

シャドウ境界: シャドウDOMと通常のDOMの境界

シャドウルート: シャドウツリーの最上位ノード

テンプレートとスロット

Web Componentsではtemplate要素とslot要素を使用することが可能です。

カスタム要素の中身を動的に変更できます。

参考

ウェブコンポーネント - Web API | MDN

Element: attachShadow() メソッド - Web API | MDN