::part()

::partCSS擬似要素で、一致する part 属性を持つシャドウツリー内の要素を表します。

custom-element::part(foo) {
  /* Styles to apply to the `foo` part */
}

構文

::part( <ident>+ )

HTML

<template id="tabbed-custom-element">
<style type="text/css">
*, ::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

tabbed-custom-element::part(tab) {
  color: #0c0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0c0d19;
  border-color: #0c0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0c0d33;
}

tabbed-custom-element::part(tab):focus {
  box-shadow: 
    0 0 0 1px #0a84ff inset, 
    0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

tabbed-custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}

JavaScript

let template = document.querySelector("#tabbed-custom-element");
globalThis.customElements.define(template.id, class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content);
  }
});

結果

仕様書

仕様書 状態 備考
Shadow Parts
::part の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
::partChrome 完全対応 73Edge 完全対応 79Firefox 完全対応 72
完全対応 72
未対応 69 — 72
無効
無効 From version 69 until version 72 (exclusive): this feature is behind the layout.css.shadow-parts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 60Safari 完全対応 13.1WebView Android 完全対応 73Chrome Android 完全対応 73Firefox Android 未対応 なしOpera Android 完全対応 52Safari iOS 完全対応 13.4Samsung Internet Android 完全対応 11.0

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

  • part 属性 - ::part() セレクタで選択できるパーツを定義するために使用されます
  • exportparts 属性 - ネストされたシャドウツリーにシャドウパーツを推移的にエクスポートするために使用されます。
  • Explainer: CSS Shadow ::part and ::theme