宣言的Shadow DOM

従来の Shadow DOM は JavaScript（attachShadow）で作成します。サーバーレンダリングされたページでは、これは JS が実行されるまでシャドーツリーが空であることを意味し、最初のバイトで完全な HTML を提供するという SSR の目的が失われます。Declarative Shadow DOM はこの問題を解決します。

パース時に HTML 内でシャドールートを宣言するには、shadowrootmode="open" を指定した <template> を使用します。ブラウザが親要素にシャドールートを自動的にアタッチし、テンプレートのコンテンツがシャドーツリーになります。JavaScript は必要ありません。

Declarative Shadow DOM により、真のサーバーレンダリングされた Web Components を実現できます。サーバーは完全なシャドーツリーをインラインで出力し、ブラウザは JS の実行前にそれをパースしてアタッチします。その後、ハイドレーション用の JS が完全にレンダリングされた状態を引き継げます。フレームワークの SSR と同等です。

命令型の attachShadow と同じモードを使用します。shadowrootmode="open" はシャドーを element.shadowRoot として公開し、shadowrootmode="closed" は非公開にします。動作は JavaScript でアタッチした場合と同一です。

ブラウザは、最初に <template shadowrootmode> を認識した時点でシャドールートをアタッチします。アタッチされるとテンプレートは消費されるため、後から検索しても何も返りません。これは attachShadow のライフサイクルと同じです。要素が存在する間、シャドーは存続します。

ライト DOM の子要素（例の <template> の外側にある <p>）は、命令型の Shadow DOM と同じように、シャドーツリー内の <slot> 要素へ投影されます。コンポジションの仕組みは同一で、異なるのはアタッチ方法だけです。

<my-card> が登録済みの Custom Element であれば、アップグレード処理は attachShadow を再度呼び出すのではなく、すでにアタッチされているシャドールートを使用します。Custom Element のクラスは、作成する必要なく connectedCallback で this.shadowRoot を読み取れます。

Lit-html の render、Astro コンポーネント、その他いくつかのフレームワークは、SSR の出力の一部として Declarative Shadow DOM を出力するようになりました。独自実装も可能です。文字列テンプレート方式であれば、どのようなシステムでも shadowrootmode テンプレートを書き出せます。

Declarative Shadow DOM は Chrome、Edge、Safari、Firefox で利用できます。古いブラウザは <template> 要素を何もせずに無視します。テンプレート内のコンテンツは表示されないため、非対応環境でも適切に機能を縮退できます。

より広くサポートするには、小さなスクリプトで DOM を走査し、template[shadowrootmode] を実際のシャドールートに変換できます。後続のコンポーネントのアップグレードで期待どおりのシャドーツリーが認識されるように、Custom Element の登録前に実行してください。

Declarative Shadow DOM では構造が重複します。<template> のコンテンツがコンポーネントのクラスに組み込まれているにもかかわらず、HTML にも存在するためです。同じコンポーネントが多数あるページでは、ペイロードが膨らみます。フレームワークは重複排除を行いますが、独自実装の SSR でも同じ対応を検討するとよいでしょう。

Web Components を提供していて、最初のバイトでのレンダリングや SEO を重視するなら、今すぐ導入してください。この機能は安定しており、サポートも整っているため、Web Components ベースのアプリケーションにおける SSR の仕組みを大幅に改善します。Shadow DOM を使わないアプリケーションには適用できません。

Declarative Shadow DOM は、命令型の attachShadow と比べてどのような問題を解決しますか。

Declarative Shadow DOM は、Custom Element 内の <template shadowrootmode="open"> を使用して、JS を必要とせずにパース時にシャドールートをアタッチします。Web Components で真の SSR を実現し、ハイドレーション前からシャドーツリー、スコープ付きスタイル、スロットをすべて機能させられます。すべてのモダンブラウザでサポートされ、古いブラウザ向けのポリフィルも利用できます。フレームワーク（Lit、Astro）は自動的に出力します。