exportparts
The exportparts
global attribute allows you to select and style elements existing in nested shadow trees, by exporting their part
names.
The shadow tree is an isolated structure where identifiers, classes, and styles cannot be reached by selectors or queries belonging to a regular DOM.
To apply a style to an element living in a shadow tree, by CSS rule created outside of it, part
global attribute has to be used. It has to be assigned to an element present in Shadow Tree, and its value should be some identifier.
Rules present outside of the shadow tree, must use the ::part
pseudo-element, containing the same identifier as the argument.
The global attribute part
makes the element visible on just a single level of depth. When the shadow tree is nested, parts will be visible only to the parent of the shadow tree but not to its ancestor. Exporting parts further down is exactly what exportparts
attribute is for.
Attribute exportparts
must be placed on a shadow Host, which is the element to which the shadow tree is attached. The value of the attribute should be a comma-separated list of part names present in the shadow tree and which should be made available via a DOM outside of the current structure.
Specifications
Specification |
---|
CSS Shadow Parts # element-attrdef-html-global-exportparts |
Browser compatibility
BCD tables only load in the browser
See also
- All global attributes.