Last Updated : 23 Jul, 2025
The HTML part attribute is a global attribute that can be used to allow CSS to select and style specific elements in the shadow tree through the ::part pseudo-element.
Syntax:
part="tab"
Example: In this example we demonstrates the part attribute for styling shadow DOM elements. It creates a custom element with tabs using a template and defines its appearance via ::part in CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
color: green;
}
tabbed-custom-element::part(tab) {
color: green;
border-bottom: dotted 2px;
width: 400px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<strong>HTML part Attribute</strong>
<br><br>
<template id="tabbed-custom-element">
<div part="tab">Hypertext Markup Language</div>
<div part="tab active">Cascading Style Sheet</div>
<div part="tab">JavaScript</div>
</template>
<tabbed-custom-element></tabbed-custom-element>
</center>
<script>
// Using the selector to select the
// part attributes elements
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);
}
});
</script>
</body>
</html>
Output:
Supported Browsers:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4