::part() Pseudo Element

::part() CSS Pseudo Element

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The ::part() pseudo-class in CSS is a specialized selector that allows developers to style elements inside a shadow DOM from the outside. Shadow DOM encapsulation typically prevents external styles from affecting the internal elements of a web component, ensuring a self-contained component style. However, there are situations where controlled styling of specific internal parts is desirable. The ::part() pseudo-class provides a standardized mechanism to expose and style those internal parts without breaking the encapsulation.

To use ::part(), the shadow DOM component must define a part attribute on elements that should be stylable externally. For example, a custom button component might define its inner <code>span</code> as <span part="label">Button Text</span>. Once a part is defined, the outer stylesheet can target it using the ::part() pseudo-class, like so:

custom-button::part(label) {
    color: white;
    background-color: blue;
    padding: 8px 16px;
    border-radius: 4px;
}

This allows the external CSS to style the label part of the <code>custom-button</code> component without directly accessing the shadow DOM. You can even combine it with other pseudo-classes or selectors for more advanced effects:

custom-button::part(label):hover {
    background-color: darkblue;
}

The ::part() pseudo-class is particularly useful when creating reusable components that need flexible theming or custom styling from outside their encapsulated shadow DOM. It's different from the ::slotted() pseudo-class, which allows styling of nodes projected into slots inside shadow DOM but cannot style arbitrary internal elements.

Additionally, ::part() can be combined with multiple parts if a shadow DOM element exposes more than one part:

custom-card::part(header),
custom-card::part(footer) {
    font-weight: bold;
}

This demonstrates that ::part() allows granular, controlled styling while maintaining the encapsulation benefits of the shadow DOM, supporting maintainable and themeable web components.

Syntax

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

Example

HTML

<my-card>

  <p>This is a card component with a hidden shadow DOM.</p>

</my-card>



<script>

  class MyCard extends HTMLElement {

    constructor() {

      super();

      const shadow = this.attachShadow({ mode: 'open' });

      shadow.innerHTML = `

        <style>

          div {

            border: 1px solid #ccc;

            padding: 20px;

            border-radius: 8px;

          }

        </style>

        <div>

          <slot></slot>

          <button part="action-button">Click Me</button>

        </div>

      `;

    }

  }

  customElements.define('my-card', MyCard);

</script>

CSS

/* Targeting the component itself */

my-card {

  display: block;

  margin: 20px;

  font-family: sans-serif;

}



/* Using ::part to style the internal button from the outside */

my-card::part(action-button) {

  background-color: #007bff;

  color: white;

  border: none;

  padding: 10px 20px;

  border-radius: 4px;

  cursor: pointer;

  transition: background 0.3s;

}



/* You can even use hover states on the part */

my-card::part(action-button):hover {

  background-color: #0056b3;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS ::part() pseudo element. Hover over a browser icon to see the version that first introduced support for this CSS psuedo element.