O with occluded right edge to appear also as a C Open Web Components Guides Docs Blog

Styling: Styles Piercing Shadow DOM

"Doesn't shadow DOM provide total encapsulation?"

Nope! As written in the spec:

The top-level elements of a shadow tree inherit from their host element.

What this means is that inheritable styles, like color or font-family among others, continue to inherit in shadow DOM, will pierce the shadow DOM and affect your component's styling.

Custom CSS properties are also able to pierce the shadow DOM boundary, and can be used to style elements from outside of your component itself. Example:

/* define: */
html {
  --owc-blue: #217ff9;
}

/* use inside your component: */
:host {
  background-color: var(--owc-blue);
}

If this inheriting behavior is undesirable, you can reset it by adding the following CSS to your component:

:host {
  /* Reset specific CSS properties */
  color: initial;

  /* Reset all CSS properties */
  all: initial;
}

Do note that setting all: initial; will also reset any CSS custom properties, which you'll usually want to maintain. If you find yourself going this route, it's worth considering if you need an iframe instead.

You can find a code example here.

If you're interested in reading more about this, you can check out these resources: