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.
slot
は Element
インターフェイスのプロパティで、この要素が挿入されたシャドウ 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