CSS shadow parts
The CSS shadow parts module defines the ::part() pseudo-element that can be set on a shadow host. Using this pseudo-element, you can enable shadow hosts to expose the selected element in the shadow tree to the outside page for styling purposes.
By default, elements in a shadow tree can be styled only within their respective shadow roots. The CSS shadow parts module enables including a part attribute on <template> descendants that make up the custom element, exposing the shadow tree node to external styling via the ::part() pseudo-element.
Reference
>Selectors
HTML attributes
Definitions
Guides
- CSS pseudo-elements
 - 
Alphabetical list of pseudo-elements defined by all the CSS specifications and WebVTT
 - Web components
 - 
Overview of the different APIs that enable creating reusable custom elements or web components.
 
Related concepts
- HTML 
<template>element - HTML 
<slot>element Element.partpropertyElement.shadowRootpropertyElement.attachShadow()methodShadowRootinterface- CSS scoping module
 
Specifications
| Specification | 
|---|
| CSS Shadow Parts> | 
See also
- CSS pseudo elements module
 - CSS selectors module
 - Using shadow DOM
 - Templates: Styling outside of the current scope on web.dev (2023)