W3cubDocs

/CSS

::part

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 Parts
The definition of '::part' in that specification.
Working Draft Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
::part 73 79 72
72
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.
No 60 13.1
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
::part 73 73 No 52 13.4 11.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::part