HTML part Attribute
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 >w3wiki</ 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
Contact Us