::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
は CSS の擬似要素で、一致する part
属性を持つシャドウツリー内の任意の要素を表します。
css
custom-element::part(foo) {
/* `foo` の部分に適用するスタイル */
}
構文
css
::part(<ident>+) {
/* ... */
}
例
HTML
html
<template id="tabbed-custom-element">
<style>
*,
::before,
::after {
box-sizing: border-box;
padding: 1rem;
}
:host {
display: flex;
}
</style>
<div part="tab active">Tab 1</div>
<div part="tab">Tab 2</div>
<div part="tab">Tab 3</div>
</template>
<tabbed-custom-element></tabbed-custom-element>
CSS
css
tabbed-custom-element::part(tab) {
color: #0c0dcc;
border-bottom: transparent solid 2px;
}
tabbed-custom-element::part(tab):hover {
background-color: #0c0d19;
color: #ffffff;
border-color: #0c0d33;
}
tabbed-custom-element::part(tab):hover:active {
background-color: #0c0d33;
color: #ffffff;
}
tabbed-custom-element::part(tab):focus {
box-shadow:
0 0 0 1px #0a84ff inset,
0 0 0 1px #0a84ff,
0 0 0 4px rgb(10 132 255 / 30%);
}
tabbed-custom-element::part(active) {
color: #0060df;
border-color: #0a84ff !important;
}
JavaScript
js
let template = document.querySelector("#tabbed-custom-element");
globalThis.customElements.define(
template.id,
class extends HTMLElement {
constructor() {
super().attachShadow({ mode: "open" }).append(template.content);
}
},
);
結果
仕様書
Specification |
---|
CSS Shadow Parts # part |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
part
属性 -::part()
セレクターで選択できるパーツを定義するために使用されますexportparts
属性 - 入れ子になったシャドウツリーにシャドウパーツを推移的にエクスポートするために使用されます。- CSS シャドウパーツモジュール