Web Components

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

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

1. 背景
-----

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

2. 技術
-----

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

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

2.1. attribute-propertyリフレクション
------------------------------

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

3. 特徴
-----

3.1. カスタム要素
-----------

カスタム要素は、自律カスタム要素とカスタマイズされた組み込み要素の2つのパートに分けられる。自律カスタム要素は、ネイティブのHTML要素とは完全に分離されたHTML要素であり、本質的にはCustom Elements APIを用いてボトムアップで構築される。カスタマイズされた組み込み要素は、ネイティブのHTML要素の上に構築され、元の機能を再利用できる。

3.2. Shadow DOM
---------------

Shadow DOMは、ウェブブラウザがDOM要素をメインのdocument DOMツリーに追加せずにレンダリングできるようにする機能である。これにより、開発者とブラウザが到達できる範囲にバリアを作ることができる。開発者はネストされた要素と同じようにはShadowDOMにアクセスできなくなる一方、ブラウザはネストされた要素と同じ方法でレンダリングとコードの修正が可能になる。CSSを特定の要素のShadow DOM内にスコープすることでHTML要素をカプセル化でき、CSSスタイルがリークして意図しない影響を他の要素に与える恐れがなくなる。これらの要素はHTMLとCSSに関してカプセル化されているが、依然としてdocument内の他の要素が受け取るイベントを発火できる。

要素内のスコープされたサブツリーはshadow treeと呼ばれる。shadow treeがアタッチされた要素はshadow hostと呼ばれる。

Shadow DOMは、リテラル要素としてアタッチするか、またはscriptを使用して、常に既存の要素と接続されていなければならない。JavaScriptでは、Shadow DOMをElement.attachShadowを使用してアタッチする。HTMLとCSSをスコープする機能は、カスタム要素の作成に不可欠である。仮にshadow DOMが存在しなければ、別の外部のカスタム要素が望まない方法で相互作用する可能性をなくすことはできない。

3.3. HTMLテンプレート
---------------

HTMLテンプレートは、封印されるHTMLのチャンクを自由に挿入する手段である。HTMLテンプレートの構文は次ようになる。

<WtXmlEndTag /><WtXmlEndTag /><WtXmlEndTag />Scriptは実行されず、テンプレート内にあるリソースは、テンプレートがスタンプアウトされるまではフェッチされない。

4. 実装
-----

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

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

Hello, Web Components!!This will be injected.<WtXmlEndTag /><WtXmlEndTag /><WtXmlEndTag />

5. ブラウザのサポート
------------

Web Componentsは、すべての主要なブラウザでサポートされている。

古いブラウザの後方互換性は、JavaScriptベースのpolyfillによって実装されている。

6. コミュニティ
---------

Webコンポーネントエコシステムには多くのコミュニティの取り組みがある。WebComponents.orgは既存のWeb Componentsを検索するインターフェイスを提供している。Custom Elements Everywhereは、有名なフロントエンドフレームワークがWeb Components標準と互換性があり使用できるようになっていることを検証し、修正街のバグと利用できるワークアラウンドを提供している。さらに、Vaadin Tutorialsは、これらのワークアラウンドを効果的に使用する方法をデモアプリの例と同様の関連トピックを用いて示している。

7. 歴史
-----

Web ComponentsはAlex RussellがFronteers Conference 2011で初めて発表した。

Polymerは、Web Componentsをベースにしたライブラリで、Googleが2013年に公開した。

Firefox 63はWeb Componentsのサポートをデフォルトで有効にし、2018年に開発者ツールがWeb Componentsをサポートするように更新した。

8. 脚注
-----

9. 外部リンク
--------

[1]
[2]
[3]
[4]
[5]
[6]
[7]
[8]
[9]
[10]
[11]
[12]
[13]