DOM：Element.assignedSlotプロパティ

element が挿入された <slot> 要素を表す HTMLSlotElement で返します。

構文

値

`element`	¶Element。

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 ''

DOM