dom_dom0700_008

Shadow DOM とスロットの説明として正しいものはどれか。

  1. <slot> は常に shadow ツリー内のテキストしか表示できない
  2. <slot name=”x”> はホスト要素の子要素側で slot=”x” を付けた要素を表示する
  3. スロットに入った要素は shadow ツリーへ複製される
  4. スロットは open モードでしか使えない
正解
  1. <slot name=”x”> はホスト要素の子要素側で slot=”x” を付けた要素を表示する
解説

スロットは「投影（projection）」の仕組みで、ホストのライトDOM側にある要素を shadow ツリーの表示位置に差し込む。複製ではなく参照（表示）である。open/closed どちらでも動作する。

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

[ html ]

<user-card>
  <span slot="name">Alice</span>
  <span slot="role">Admin</span>
</user-card>
<script>
  class UserCard extends HTMLElement {
    constructor(){
      super();
      const root = this.attachShadow({mode:'open'});
      root.innerHTML = `
        <style>.label{font-weight:bold}</style>
        <div><span class="label">Name:</span> <slot name="name"></slot></div>
        <div><span class="label">Role:</span> <slot name="role"></slot></div>
      `;
    }
  }
  customElements.define('user-card', UserCard);
</script>