HTML part Global Attribute

Description

The part attribute is a global HTML attribute used primarily in the context of Web Components and the Shadow DOM. It allows you to expose specific internal elements of a shadow tree so that they can be styled from outside the shadow DOM using the ::part() CSS pseudo-element. This enables encapsulated components to maintain internal structure and styling while still allowing controlled external customization.

Purpose

Normally, elements inside a shadow DOM are completely isolated from external CSS. The part attribute provides a bridge between the internal shadow DOM and external stylesheets without breaking encapsulation. It effectively lets developers mark "styling hooks" for internal elements that can safely be styled externally.

Usage

Attribute Name: part
Attribute Value: A space-separated list of identifiers representing the "parts" of the element that can be targeted from outside the shadow DOM.
Applies To: Any HTML element, including elements inside a shadow DOM.

Syntax

<element part="name1 name2"></element>

Each name in the list represents a "part" that can later be targeted with CSS using ::part(name).
Multiple names are separated by spaces.

Example

Inside a Web Component's shadow DOM:

<template id="my-component-template">
  <style>
    p {
      font-weight: bold;
    }
  </style>
  <div part="header">This is the header</div>
  <p part="content">This is the content</p>
  <button part="action primary">Click me</button>
</template>

Using the component in a page and styling its internal parts:

<my-component></my-component>

<style>
  my-component::part(header) {
    color: blue;
    font-size: 1.2em;
  }

  my-component::part(content) {
    color: gray;
  }

  my-component::part(action) {
    background-color: green;
    color: white;
  }

  my-component::part(primary) {
    border-radius: 10px;
  }
</style>

In this example:

header, content, action, and primary are all exposed "parts" of the component.
External CSS can target them individually using ::part().
The internal structure remains encapsulated, preserving shadow DOM benefits.

Key Points

Encapsulation-friendly: Does not break the shadow DOM; only allows styling of selected parts.
Multiple parts: An element can have multiple part names, enabling versatile styling hooks.
Works with ::part() pseudo-element: The CSS selector ::part(name) is required to style the element externally.
Not limited to custom elements: Although often used with Web Components, part is a global attribute and can technically be applied to any element.
Complementary to id and class: Unlike id or class, part specifically signals which elements inside a shadow DOM are safe to style from outside.

Best Practices

Only expose elements you intend to allow styling on. Avoid exposing too many internal details.
Use descriptive part names like header, footer, or button-primary for clarity.
Combine with themeable CSS variables for even more flexible component customization.

Syntax

<element part="name1 name2"></element>

Values

part

The value of the part attribute is an identifier (or a list of identifiers) defined by the developer. There are no "reserved" keywords like true or false; instead, you choose names that describe the functional part of your component.

Value Type	Description	Example
Custom Identifiers	Any string (token) that doesn't contain spaces.	`header`, `tab-label`, `submit-btn`
Space-separated List	Multiple tokens allowing an element to belong to several "parts."	`part="thumb active"`

Example

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Part Attribute Example</title>

  <style>

    /* Style the internal parts of the web component */

    my-card::part(header) {

      background-color: #4CAF50;

      color: white;

      padding: 10px;

      font-size: 1.2em;

    }



    my-card::part(content) {

      padding: 10px;

      font-size: 1em;

      color: #333;

    }



    my-card::part(footer) {

      background-color: #f1f1f1;

      text-align: right;

      padding: 10px;

      font-style: italic;

    }

  </style>

</head>

<body>



<my-card></my-card>



<script>

  // Define a simple web component

  class MyCard extends HTMLElement {

    constructor() {

      super();



      // Attach shadow DOM

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



      // Create elements

      const wrapper = document.createElement('div');



      const header = document.createElement('div');

      header.setAttribute('part', 'header');

      header.textContent = 'Card Header';



      const content = document.createElement('div');

      content.setAttribute('part', 'content');

      content.textContent = 'This is some content inside the card.';



      const footer = document.createElement('div');

      footer.setAttribute('part', 'footer');

      footer.textContent = 'Card Footer';



      // Append elements

      wrapper.appendChild(header);

      wrapper.appendChild(content);

      wrapper.appendChild(footer);



      // Attach to shadow DOM

      shadow.appendChild(wrapper);

    }

  }



  // Register the custom element

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

</script>



</body>

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML part global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.