Web Components
上記のWeb Components技術はすべてWeb標準であり、すべての主要ブラウザでサポートされている。ユーティリティライブラリを含め様々な実装方法がある。
カスタム要素 customElements.define(elemName, elemClass) :GlobalのcustomElementsに登録する。第2引数はHTMLElementを継承すること @customElement(elemName) :LitElementライブラリのTypeScript Decorator。customElements.define()の糖衣構文
ShadowDOM Element.attachShadow() :返り値のshadow rootにぶら下がる要素を追加していく。 LitElement class: 暗示的にshadowDOMをrootとする
template要素 <template> : HTML内でtemplate要素を宣言し、template要素の子要素にテンプレートを記述する
slot要素 <slot> : カスタム要素の子要素を受け入れることで要素のコンポジション(合成)をカスタム要素でも可能にする
上記の方法で作成されたWeb Componentsは最終的に以下のように利用される。