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>