dom_dom0700_007

Shadow DOM の「open」モードに関する説明で正しいものはどれか。

  1. element.attachShadow({mode:’open’}) で作ると、element.shadowRoot から参照できる
  2. open ではスロット（<slot>）が使えない
  3. open は CSS のカプセル化が無効になる
  4. open は自動的に DOM 外へレンダリングされる
正解
  1. element.attachShadow({mode:’open’}) で作ると、element.shadowRoot から参照できる
解説

open モードでは element.shadowRoot が公開される（closed は null）。スロットは通常通り利用可能。Shadow DOM はスタイルとDOM構造をカプセル化してレンダリングされる。

使用例（サンプルコード）

[ html ]

<div id="host"></div>
<script>
  const host = document.getElementById('host');
  const shadow = host.attachShadow({ mode: 'open' });
  shadow.innerHTML = `<style>p{color:purple}</style><p>Inside Shadow</p>`;
  console.log(host.shadowRoot.querySelector('p').textContent); // 参照可
</script>