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.

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

HTMLSlotElement のインスタンス、または要素がスロットに割り当てられていない場合や、 modeclosed に設定されている場合は 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
# dom-slotable-assignedslot

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
assignedSlot

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support