初心者エンジニア向け 業務に役立つデザインソフトの使い方!
![](https://images.microcms-assets.io/assets/a825b67e3494487eb265986360c81314/11410d002199476086449e60607057b6/blog_thumb-uchida1.png)
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種類あります。
既存のHTML要素を継承しないカスタム要素です。
HTMLElement
を継承することで生成します。
命名規則があり、<example-element>
のようにケバブケースで記述します。
HTMLParagraphElement
やHTMLInputElement
など既存のHTML要素を継承するカスタム要素です。
is
属性を使用して生成します。
カスタム要素のクラスにはコールバックを定義できます。
connectedCallback()
: カスタム要素がドキュメントに追加されたときに呼び出されます。
disconnectedCallback()
: カスタム要素がドキュメントから削除されたときに呼び出されます。
attributeChangedCallback()
: カスタム要素の属性が変更されたときに呼び出されます。
Web Componentsで要素をカプセル化させるための仕組みがシャドウDOMです。
シャドウDOMを使用することで、カスタム要素の中身を他の要素とは独立させることができます。
シャドウDOMをつくるにはattachShadow()
メソッドを使用します。
attachShadow()
メソッドの引数のmode
にはopen
またはclosed
を指定します。
シャドウルートへの操作をopen
なら可能に、closed
なら不能にします。
シャドウホスト: シャドウDOMを持つ要素
シャドウツリー: シャドウDOMの内部のDOMツリー
シャドウ境界: シャドウDOMと通常のDOMの境界
シャドウルート: シャドウツリーの最上位ノード
Web Componentsではtemplate
要素とslot
要素を使用することが可能です。
カスタム要素の中身を動的に変更できます。