Declarative shadow DOM
宣言的 Shadow DOM は、<template shadowrootmode> を使用して、JavaScript なしで Shadow DOM ツリーを HTML 内に直接記述できます。
概要
宣言的 Shadow DOM は、<template shadowrootmode> を使用して、JavaScript なしで Shadow DOM ツリーを HTML 内に直接記述できます。
対応ブラウザ
デスクトップ
Chrome 111+
Edge 111+
Safari 16.4+
Firefox 123+
モバイル
Chrome Android 111+
Safari iOS 16.4+
Firefox Android 123+
基本構文
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">カードタイトル</h2>
<p>カードの内容</p>
</my-card>実務での使いどころ
-
Declarative shadow DOM の活用
宣言的 Shadow DOM。HTML 内で Shadow DOM を直接定義する機能。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。