ContextQMD
Back to Content

CSS shadow parts

files/en-us/web/css/guides/shadow_parts/index.md

latest2.1 KB
Original Source

The CSS shadow parts module defines the {{cssxref("::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()")}}

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()")}}
    • {{cssxref(":host-context()")}}
    • {{CSSXref("::slotted")}}

Specifications

{{Specifications}}

See also