Previewbox Docs

Appearance

CSS Shadow Parts ​

CSS Shadow Parts allow developers to style elements inside a shadow tree, which is particularly useful for customizing components like the <previewbox-link> in Previewbox.

Why Use Shadow Parts? ​

Shadow DOM encapsulates styles, preventing them from leaking out or being affected by external styles. This is beneficial for components like <previewbox-link>, which may have internal elements that need specific styling without interference.

Exposing a Part ​

To style a part of a Shadow DOM component, you must first expose it using the part attribute. For example, the <previewbox-link> component exposes a link part for its anchor tag:

html
<previewbox-link>
  <a part="link" href="https://example.com">Visit Example</a>
</previewbox-link>

You can style the exposed link part using the ::part() pseudo-element. Here’s how to change the color of the link:

css
previewbox-link::part(link) {
  color: blue;
  text-decoration: underline;
}

This allows you to customize the appearance of the link while maintaining the encapsulation benefits of Shadow DOM.

INFO

Remember that parts can also be styled with pseudo-classes, such as :hover:

css
previewbox-link::part(link):hover {
  color: darkblue;
}