Element: assignedSlot プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

assignedSlot は Element インターフェイスの読み取り専用プロパティで、 HTMLSlotElement を返します。これは、そのノードが挿入された <slot> 要素を表します。

値

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

例

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

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

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

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

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

仕様書

Specification
DOM Standard
# dom-slotable-assignedslot

ブラウザーの互換性

BCD tables only load in the browser