HTML part Attribute

Last Updated : 06 Jun, 2022

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:

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>