JavaScript Element part Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word PART

Definition

Element.part is a read-only DOMTokenList of the element’s part identifiers (MDN). It reflects the HTML part attribute and exposes nodes for CSS ::part() across a shadow boundary.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.part. Start with this line.

JavaScript
element.part
CallWhat it does
element.partPrimary signature.

Built into the browser. Read or assign el.part — no import required.

Library declarations
JavaScript
element.part

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*The current value of el.part.

JavaScript Examples

Example 1 — Read and Assign part

Set the whole token string, then read value.

JavaScript
const el = document.createElement("div");

el.part = "tab active";
console.log(el.part.value);           // "tab active"
console.log(el.getAttribute("part")); // "tab active"
Try It Yourself

How It Works

  1. Create an element. Any element can hold part tokens.
  2. Assign a string. el.part = "…" sets the list value.
  3. Read value. Space-separated tokens, like classList.
  4. Attribute matches. getAttribute("part") shows the same string.

Example 2 — add / remove

Toggle individual part names without rewriting the whole string.

JavaScript
const el = document.createElement("button");
el.part = "tab";

el.part.add("active");
console.log(el.part.value);              // "tab active"
console.log(el.part.contains("active")); // true

el.part.remove("active");
console.log(el.part.value);              // "tab"
Try It Yourself

How It Works

  1. Start with one token. part = "tab".
  2. add inserts another token without wiping the first.
  3. contains checks membership.
  4. remove drops one token and leaves the rest.

Example 3 — Part Inside Shadow DOM

Expose a node in an open shadow tree (where ::part() can reach it).

JavaScript
const host = document.createElement("div");
const root = host.attachShadow({ mode: "open" });
const btn = document.createElement("button");
btn.textContent = "Tab";
btn.part = "tab active";
root.appendChild(btn);

console.log(btn.part.value); // "tab active"
console.log(root.querySelector("[part]").part.contains("tab")); // true
Try It Yourself

How It Works

  1. Attach an open shadow root on a host element.
  2. Create a child and set part tokens on it.
  3. Append into the shadow tree. The part is now exposable to CSS.
  4. Read from JS with part.value / contains (CSS would use ::part()).
Compatibility

Browser Support

Element.part is Baseline Widely available (MDN: since July 2020). Safe across modern evergreen browsers.

✓ Baseline · Widely available

Element.part

DOMTokenList of part identifiers — expose shadow nodes for CSS ::part().

96% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
part Excellent

Bottom line: Safe for production component styling. Pair with attachShadow and ::part() in CSS.

Frequently Asked Questions

It returns a DOMTokenList of the element's CSS part identifiers, reflecting the part HTML attribute. Those names let external CSS style shadow DOM internals via ::part().
No. MDN marks Element.part as Baseline Widely available (since July 2020). It is not Deprecated, Experimental, or Non-standard.
Yes. You cannot replace the DOMTokenList object, but you can use add(), remove(), replace(), and toggle(), or assign a string to el.part (sets its value).
A CSS pseudo-element that selects elements inside a shadow tree exposed with the part attribute — for example my-element::part(tab).
You can set part on any element and read it in JS. ::part() styling only applies across a shadow boundary.
part names parts on elements in a shadow tree. exportparts on the host re-exports nested part names so outer CSS can reach deeper shadows.

Next: prefix

Learn how to read an element’s namespace prefix string.

prefix tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Element outerHTML Property JavaScript Element prefix Property