Element.slot
Element
インターフェースの slot
プロパティは shadow DOM slot の名前を返します。
slot は、web コンポーネント の中にユーザーが任意のマークアップを代入できる要素を提供します (template と slot の使い方 により詳しい説明があります)。
Syntax
var aString = element.slot element.slot = aString
値
例
templateのサンプル (実行例)では、<
my-paragraph>
と名付けた簡単なカスタム要素を作っています。このカスタム要素には、shadow root が付いており、my-text
と名付けられた slot 要素が含まれています。
<my-paragraph>
がドキュメントの中で利用された時、その内部で slot
属性を my-text
に設定した要素を作ることで、slot の内容を変更することができます。
<my-paragraph>
<span slot="my-text">新しいテキストを代入します</span>
</my-paragraph>
JavaScript ファイルで <span>
への参照を取得すると、対応する <slot>
の名前を取得できます。
let slottedSpan = document.querySelector('my-paragraph span')
console.log(slottedSpan.slot); // 'my-text' と表示されます
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
DOM slot の定義 |
現行の標準 |
ブラウザ実装状況
BCD tables only load in the browser