::part() CSS Pseudo Element


The CSS ::part() pseudo-element can be used to select and style elements within a shadow tree. This is useful for styling custom elements, as it allows you to style the internal elements of the element without having to expose them to the outside world.

To use the ::part() pseudo-element, you must first add a part attribute to the element that you want to style. The value of the part attribute is the name of the element that you want to style within the shadow tree.


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


<template id="tabbed-custom-element">
::after {
box-sizing: border-box;
padding: 1rem;
:host {
display: flex;
<div part="tab active">Tab 1</div>
<div part="tab">Tab 2</div>
<div part="tab">Tab 3</div>


let template = document.querySelector("#tabbed-custom-element");
class extends HTMLElement {
constructor() {
super().attachShadow({ mode: "open" }).append(template.content);
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 {
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;


In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.

Browser Support

The following table will show you the current browser support for the CSS ::part() pseudo element.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023