dom_dom0700_008

Shadow DOM を作るには host.( A )({ mode: ‘open’ }) のようにする。mode: ‘open’ だと外部から host.( B ) で内部にアクセスできる。

解答

A: attachShadow
B: shadowRoot

解説

attachShadow でシャドウルートを生成します。open モードは element.shadowRoot で参照可能、closed は参照不可です。

使用例(サンプルコード)

[ html ]

<div id="host"></div>
<script>
  const host = document.getElementById('host');
  const root = host.attachShadow({mode:'open'});
  const style = document.createElement('style');
  style.textContent = 'p{color:purple}';
  root.append(style, Object.assign(document.createElement('p'),{textContent:'shadowed'}));
  console.log(host.shadowRoot === root); // true
</script>