Web/CSS/ part

From Get docs


The ::part CSS pseudo-element represents any element within a shadow tree that has a matching part attribute.

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

Syntax

::part( <ident>+ )

Examples

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: #0c0dcc;
  border-bottom: transparent solid 2px;
}

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

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

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);
  }
});

Result

Specifications

Specification Status Comment
Shadow PartsThe definition of '::part' in that specification. Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
::part Chrome

Full support 73

Edge

Full support 79

Firefox Full support 72


Full support 72


No support 69 — 72

Disabled'

Disabled' 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

No support No

Opera

Full support 60

Safari

Full support 13.1

WebView Android

Full support 73

Chrome Android

Full support 73

Firefox Android

No support No

Opera Android

Full support 52

Safari iOS

Full support 13.4

Samsung Internet Android

Full support 11.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.'
User must explicitly enable this feature.


See also

  • The part attribute - Used to define parts which can be selected by the ::part() selector
  • The exportparts attribute - Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
  • Explainer: CSS Shadow ::part and ::theme