Element: part プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
part
は Element
インターフェイスのプロパティで、この要素の部品識別子(すなわち part
属性を使用して設定されたもの)を DOMTokenList
で返します。これらはシャドウ DOM の部品を ::part
擬似要素でスタイル付けするために使用することができます。
値
DOMTokenList
オブジェクトです。
例
以下は、 shadow-part の例から抜粋したものです。ここでは、 part
属性を使用してシャドウ部品を見つけ、 part
プロパティを使用して各タブの部品識別子を変更し、タブがクリックされたときに正しいスタイルがアクティブなタブに適用されるようにしています。
js
const tabs = [];
const children = this.shadowRoot.children;
for (const elem of children) {
if (elem.getAttribute("part")) {
tabs.push(elem);
}
}
tabs.forEach((tab) => {
tab.addEventListener("click", (e) => {
tabs.forEach((tab) => {
tab.part = "tab";
});
e.target.part = "tab active";
});
console.log(tab.part);
});
仕様書
Specification |
---|
CSS Shadow Parts # idl |
ブラウザーの互換性
BCD tables only load in the browser