template 要素の shadowrootmod を試してみる

今までは Web component なんか作る時にを使っていた Shadow DOM が HTML だけで使えるようになったということで試してみる。

これで閉じたスタイルが使えるようになるので、使い勝手はよさそう。

下記のような普通の DOM だともちろん普通に見える

<h2>普通の DOM h2</h2>

普通の DOM h2

次に下記の二つの形の template 要素を配置してみると、shadowrootmode=open のものは見えるがそうでないものは見えない。

<div class="close">
    <template>
        <h2>見えない SHADOW DOM h2.close </h2>
    </template>
</div>

<div class="open">
    <template shadowrootmode="open">
        <style>
        h2 {
            color: #f00;
        }
        </style>
        <h2>見える SHADOW DOM h2.open</h2>
    </template>
</div>

ではそれぞれの shadowRoot を JavaScript で取得してみる。

document.querySelector('.close').shadowRoot

document.querySelector('.open').shadowRoot

template 要素の shadowrootmod を試してみる

普通の DOM h2

見ない SHADOW DOM h2.close

見える SHADOW DOM h2.open

参考文献