Web Components とは
再利用性やカプセル化について理解が深まり、UI部品の必要性が見えてきたかと思います。こういった課題感を解決するために、各ブラウザの開発元が協力しながら長い期間を費やして整備されたのが、「Web Components」と呼ばれるJavaScript向けのAPI機能群です。
JavaScriptでいくつかの機能を呼び出すことによって、<my-great-beautiful-button> のような標準にはないHTMLタグを自作して再利用することができます（リスト1）。
<div>
<my-great-beautiful-button>
<span slot="label">submit now!</span><!-- (1) 表示内容が差し替え可能 -->
</my-great-beautiful-button>
</div>
<div style="margin-top: 8px;">
<!-- (2) 独自の属性を渡すこともできる -->
<my-great-beautiful-button backgroundColor="#008CCF" color="#FFFFFF" >
<span slot="label">submit now!</span>
</my-great-beautiful-button>
</div>
リスト1をHTMLに埋め込んで実行すると、図2のようになります。
図2：再利用したボタン
通常の <button> にスタイルを当てて、角丸やパディングなどで見た目を整えてみました。（1）の要素を差し替えればボタンの表示テキストを変更できたり、（2）で属性を書き換えれば背景色やテキスト色を任意の色にできたりと、拡張性を持った要素も作成できます。
この独自の要素の内部で利用しているCSSスタイル定義は要素の外側に影響を与えませんし、要素の外側で定義したスタイルが要素の内部へ影響を与える方法は限られます。どうやらこれは、再利用性とカプセル化を実現してくれそうです。
Web Componentsの3要素
さて、Web Componentsの簡単な例を見て、何ができそうな技術なのかをざっくりと触れられたところで、そろそろWeb Componentsとはどんな技術なのかについてお話ししておきましょう。
公式ドキュメントによれば、Web Componentsは次に挙げる3つの主要な技術の組み合わせで成り立っています。
- カスタム要素（Custom Elements）
- シャドウ DOM（Shadow DOM）
- HTML テンプレート（HTML Templates）
細かいAPIの解説については次回以降に行うとして、今回は概要を押さえていきましょう。
カスタム要素は、すでに例示したように独自のHTMLタグの表示や振る舞いを定義する機能です。この機能によって定義されたカスタム要素は、通常のHTMLタグと同様にWebサイト制作に利用できます。
シャドウDOMは、カプセル化された「隠しDOMツリー」を生成し、通常のDOMツリーに紐付ける機能です。この「隠しDOMツリー」は、通常のDOMツリーをは別にレンダリングされるため、通常のDOMツリーから影響を受けたり、影響を与えたりする心配をせずに要素を作成できます。
HTMLテンプレートは、<template> と <slot> 要素を利用して、再利用可能なHTML構造を定義する機能です。カスタム要素の内部でも利用でき、文書構造を再利用したい場合に重宝します。
上記3点の中で特にわかりづらいのがシャドウDOMなので、少し補足します。開発者ツールでDOMツリーの自作タグを配置した箇所を見てみると、#shadow-root という項目が表示されています（図3）。これが隠された状態のシャドウDOMツリーです。
図3：Dev ToolsとシャドウDOM
シャドウDOMツリーは通常のDOMツリー構築とは別のライフサイクルでレンダリングされるため、開発者ツールでも一旦は隠された状態で表示されます。レンダリングがひと段落した以降は、図4のようにシャドウDOMの内部を展開して確認することもできます。
図4：シャドウDOMを展開して実装を確認する
カスタム要素に紐づけられたシャドウDOMの中に隠蔽される形で、HTML文書とスタイルが定義されている様子が見えました。
このように、Web Componentsで独自の要素を作成する際は、まずカスタム要素を定義し、その中に作成したシャドウDOMツリーに文書構造やスタイルの定義を行っていくことになります。
