custom-element::part(foo) {   /* Styles to apply to the `foo` part */ } 

::part()

The ::part CSS pseudo-element represents any element within a shadow tree that has a matching part attribute.

custom-element::part(foo) {   /* Styles to apply to the `foo` part */ } 

Syntax

::part( <ident>+ )

Examples

HTML

<template id="tabbed-custom-element"> <style type="text/css"> *, ::before, ::after {   box-sizing: border-box;   padding: 1rem; } :host {   display: flex; } </style> <div part="tab active">Tab 1</div> <div part="tab">Tab 2</div> <div part="tab">Tab 3</div> </template>  <tabbed-custom-element></tabbed-custom-element> 

CSS

tabbed-custom-element::part(tab) {   color: #0c0dcc;   border-bottom: transparent solid 2px; }  tabbed-custom-element::part(tab):hover {   background-color: #0c0d19;   border-color: #0c0d33; }  tabbed-custom-element::part(tab):hover:active {   background-color: #0c0d33; }  tabbed-custom-element::part(tab):focus {   box-shadow:     0 0 0 1px #0a84ff inset,     0 0 0 1px #0a84ff,     0 0 0 4px rgba(10, 132, 255, 0.3); }  tabbed-custom-element::part(active) {   color: #0060df;   border-color: #0a84ff !important; } 

JavaScript

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);   } }); 

Result

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors