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 >
|
Output:
Supported Browsers:
- Google Chrome 73 and above
- Firefox 72 and above
- Safari 13.1 and above
- Opera 60 and above
- Edge 79 and above