Shadow DOM
Web Components の仕様の一部であり、カプセル化する方法を提供する。
Shadow DOM を使うことで通常の (Light) DOM を利用する形で新たに DOM ツリーを作ることができる。
例
例えばサーバーから以下のような HTML がやってきたとする。
code: html
<article-list>
<div><a href="/foo">Foo</a></div>
<div><a href="/bar">Bar</a></div>
<div><a href="/baz">Baz</a></div>
</article-list>
ここで <article-list> を Shadow DOM としてアタッチし、JS から以下のような DOM を組み立てることができる。
code: html
<slot></slot>
<button>Read more</button>
このとき<slot> にはサーバーからレンダリングされた要素を埋め込むことができ、レンダリング結果を再利用することができる。また Shadow DOM ではスタイルシートをもとの document から独立して持つことになり、新しく追加した <button> は影響を受けない。
BFF がない環境で SSR と CSR の間のようなコンポーネントを作ることができるため、レガシーな Web サービスを SEO などの影響を最小限にしつつコンポーネント化する際に特に活用できる方法だと思われる。
対応フレームワーク
DOM の仕様なのでフレームワークなしでも作ることができるが、例によって document.createElement だらけになってしまう。宣言的 UI や差分変更(リコンサイラ)を扱いたい場合はなんらかのフレームワークを使うことになる。