Element: slot プロパティ

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.

slotElement インターフェイスのプロパティで、この要素が挿入されたシャドウ DOM のスロットの名前を返します。

スロットはウェブコンポーネント内のプレースホルダーで、ユーザーが独自のマークアップで埋めることができます(詳しくは、テンプレートとスロットの使用をご覧ください)。

文字列です。

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

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

html
<my-paragraph>
  <span slot="my-text">別なテキストにしましょう。</span>
</my-paragraph>

JavaScript ファイルで <span> への参照を取得すると、対応する <slot> の名前が取得できます。

js
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // 'my-text' と表示

仕様書

Specification
DOM Standard
# ref-for-dom-element-slot①

ブラウザーの互換性

BCD tables only load in the browser