Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

Declarative shadow DOM

<template> は HTML の要素で、HTML のフラグメントを保持し、後で JavaScript を使用して使用したり、シャドウ DOM の中に直接生成したりするためのメカニズムとして機能します。

メタデータ・スクリプト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
shadowRootClonable
124
124
125
18
124
18
HTML 属性
shadowrootclonable

この要素を使用して作成した ShadowRoot の clonable プロパティの値を true に設定します。 設定されている場合、シャドウホスト（この の親要素）の複製を Node.cloneNode() または Document.importNode() で作成すると、コピーにシャドウルートが含まれます。
124
124
125
17.5
124
17.5
shadowrootdelegatesfocus

この要素を使用して作成した ShadowRoot の delegatesFocus プロパティの値を true に設定します。 これが設定されていて、シャドウツリー内のフォーカス可能でない要素が選択されている場合、フォーカスはツリー内の最初のフォーカス可能な要素に譲られます。 この値は false が既定値です。
123
123
123
16.4
123
16.4
shadowrootmode

親要素のシャドウルートを生成します。 これは Element.attachShadow() メソッドの宣言版で、同じenumerated値を受け入れます。
111
111
123
16.4
111
16.4
shadowrootserializable

この要素を使用して作成した ShadowRoot の serializable プロパティの値を true に設定します。 設定されている場合、シャドウルートは Element.getHTML() または ShadowRoot.getHTML() メソッドを、options.serializableShadowRoots 引数を true に設定して呼び出すことでシリアライズされます。 この値は false が既定値です。
125
125
18
125
18
DOM API
shadowRootDelegatesFocus

shadowRootDelegatesFocus は HTMLTemplateElement インターフェイスのプロパティで、関連付けられた 要素の shadowrootdelegatesfocus 属性の値を反映します。
123
123
123
18
123
18
shadowRootMode

shadowRootMode は HTMLTemplateElement インターフェイスのプロパティで、関連付けられた 要素の shadowrootmode 属性の値を反映します。
111
111
123
16.4
111
16.4
shadowRootSerializable

shadowRootSerializable プロパティは、関連付けられた 要素の shadowrootserializable 属性の値を反映します。
125
125
128
18
125
18
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (111)
対応条件
  • 以前は別名で対応していました: shadowroot (90)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (111)
対応条件
  • 以前は別名で対応していました: shadowroot (90)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (111)
対応条件
  • 以前は別名で対応していました: shadowroot (90)

基本構文

HTML 
<my-card>
  <template shadowrootmode="open">
    <style>
      :host { display: block; border: 1px solid #ccc; padding: 1rem; }
      ::slotted(h2) { color: #333; }
    </style>
    <slot name="title"></slot>
    <slot></slot>
  </template>
  <h2 slot="title">Card Title</h2>
  <p>Card Description</p>
</my-card>

ライブデモ

宣言的 Shadow DOM

template shadowrootmode でHTML内にShadow DOMを直接定義。

プレビュー全画面表示

JavaScript版との比較

命令的（JS）と宣言的（HTML）の Shadow DOM 作成方法の比較。

プレビュー全画面表示

shadowrootmode の値

open と closed の違い。

プレビュー全画面表示

実務での使いどころ

  • Declarative shadow DOM の活用

    <template> は HTML の要素で、HTML のフラグメントを保持し、後で JavaScript を使用して使用したり、シャドウ DOM の中に直接生成したりするためのメカニズムとして機能します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク