dom_dom0700_009

Shadow DOM 内で外部コンテンツの差し込み位置は ( A ) 要素で定義し、ライト DOM 側では要素の ( B ) 属性にスロット名を指定する。

解答

A: <slot>
B: slot

解説

<slot name=”…”> に対し、外側の要素に slot=”…” を付けると、その位置に差し込まれます。名前なしはデフォルトスロットです。

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

[ html ]

<my-card>
  <h2 slot="title">Hello</h2>
  <p>Body content</p>
</my-card>
<script>
  customElements.define('my-card', class extends HTMLElement{
    constructor(){
      super();
      const root = this.attachShadow({mode:'open'});
      root.innerHTML = `
        <style>.title{font-weight:bold}</style>
        <div class="title"><slot name="title"></slot></div>
        <div class="body"><slot></slot></div>`;
    }
  });
</script>