Skip to main content

CSS shadow parts

The CSS shadow parts module defines the {{CSSXref("::part", "::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 {{HTMLElement("template")}} descendants that make up the custom element, exposing the shadow tree node to external styling via the ::part() pseudo-element.

Reference​

Selectors​

  • {{CSSXref("::part", "::part()")}}

HTML attributes​

Definitions​

  • {{glossary("Shadow tree")}}

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.
  • HTML {{HTMLElement("template")}} element
  • HTML {{HTMLElement("slot")}} element
  • {{domxref("Element.part")}} property
  • {{domxref("Element.shadowRoot")}} property
  • {{domxref("Element.attachShadow()")}} method
  • {{domxref("ShadowRoot")}} interface
  • CSS scoping module
    • {{CSSXref(":host")}}
    • {{CSSXref(":host_function", ":host()")}}
    • {{CSSXref(":host-context", ":host-context()")}}
    • {{CSSXref("::slotted")}}

Specifications​

See also​