Web Components(ウェブコンポーネンツ)はHTML要素をコンポーネント化する技術群の総称[1]、またそれらを用いて作成されたコンポーネントである。

従来用いられていた「1つの巨大HTML、全体に適用されるCSS」を「再利用可能なコンポーネント群の組み合わせ」で実現するため、カスタム要素・Template要素・ShadowDOMを主要な技術要素として開発された。Web標準であり、すべての主要ブラウザでサポートされている。

背景編集

従来のHTMLは1つのHTMLファイルで構成され、スタイルを提供するCSSはHTML全体へ適用されていた。このHTMLは別のHTMLでは再利用できず、また巨大なHTMLに対するCSSはコーディングを難しくしていた。ゆえに、プログラミング言語における関数やクラスのように、再利用可能なまとまり(コンポーネント)を実現する仕組みが求められていた。

技術編集

上記の問題を解決するために、3つの主要なWeb Components技術が用いられる[2]

  • カスタム要素: 再利用可能なまとまり(コンポーネント)としてカスタムHTML要素を定義可能にする
  • ShadowDOM: CSSの適用範囲・JavaScriptのアクセス範囲を限定し独立したコンポーネント化を可能にする[3]
  • HTMLテンプレート: HTML要素群のテンプレート化を可能にし(template要素)インスタンスへの要素注入を可能にする(slot要素)

HTMLテンプレートによってHTML要素のまとまりを作り出し、ShadowDOMによってCSS・JavaScriptを含めてまとまりを隔離し、それらがHTML内で再利用可能なようにカスタムHTML要素化する。このコンポーネントを利用する際にslot要素へ適切な要素を挿入(注入)することで、引数を用いた関数呼び出し・classインスタンス化のように、コンポーネントの振る舞いを変えることができる。

attribute-propertyリフレクション編集

HTMLの要素において、attributes(content attributes)とproperty(IDL attributes)は必ずしも値がリンクしない(HTML要素 § AttributeとProperty)。Web Componentsにおいていわゆるreflectionを可能にするには、そのための仕組みが必要になる。attributesはすべて文字列と定義されており、またpropertyは暗示的に静的型を持つため、propertyの型を事前に定義しattributesへのアクセス時に適切な型変換(文字列化、定義された型へのparse)をおこなうのが基本的な仕組みになる。

実装編集

上記のWeb Components技術はすべてWeb標準であり、すべての主要ブラウザでサポートされている。ユーティリティライブラリを含め様々な実装方法がある。

  • カスタム要素
    • customElements.define(elemName, elemClass) :GlobalのcustomElementsに登録する。第2引数はHTMLElementを継承すること[4]
      • @customElement(elemName) :LitElementライブラリのTypeScript Decorator。customElements.define()の糖衣構文[5]
  • ShadowDOM
    • Element.attachShadow() :返り値のshadow rootにぶら下がる要素を追加していく。
      • LitElement class: 暗示的にshadowDOMをrootとする
  • template要素
    • <template> : HTML内でtemplate要素を宣言し、template要素の子要素にテンプレートを記述する
  • slot要素
    • <slot> : カスタム要素の子要素を受け入れることで要素のコンポジション(合成)をカスタム要素でも可能にする

上記の方法で作成されたWeb Componentsは最終的に以下のように利用される。

<body>
    <my-element>
        <h2 slot="slot1">Hello, WebComponents!!</h2>
        <span slot="slot2">this will be injected.</span>
    </my-element>
</body>

脚注編集

[脚注の使い方]
  1. ^ Web Components”. MDN web docs. 2019年9月13日閲覧。 “Web Components は、再利用可能なカスタム要素を作成し、ウェブアプリの中で利用するための、一連のテクノロジーです。”
  2. ^ Web Components”. MDN web docs. 2019年9月13日閲覧。
  3. ^ Web Components”. MDN web docs. 2019年9月13日閲覧。 “要素の機能を公開せずに済み、ドキュメントの他の部分との重複を恐れることなく、スクリプト化やスタイル化できます。”
  4. ^ CustomElementRegistry.define()”. MDN web docs. 2019年9月13日閲覧。 “Constructors for autonomous custom elements must extend HTMLElement.”
  5. ^ decorators.ts”. Polymer/lit-element. GitHub. 2019年9月13日閲覧。