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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.