Element.assignedSlot

HTMLSlotElement のインスタンス、または要素がスロットに割り当てられていない場合や、 mode が closed に設定されている場合は null です（詳しくは Element.attachShadow を参照してください）。

simple-template の例 (ライブで表示) では、 <my-paragraph> という些細なカスタム要素の例を作りました。この要素にはシャドウルートが付けられ、次に my-text というスロットを含むテンプレートのコンテンツを使って入力されるようになっています。

文書内で <my-paragraph> が使用されると、スロットは my-text という値を持つ slot 属性を持つ要素内に含めることによって、 slotable 要素によって生成されることになります。以下はそのような例です。

<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

JavaScript ファイルでは、上に示した <span> への参照を取得し、 <span> が挿入された元の <slot> 要素への参照をログに記録しています。

let slottedSpan = document.querySelector('my-paragraph span')
console.log(slottedSpan.assignedSlot); // logs '<slot name="my-text">'