FAQ: What is the difference between the shadow DOM and scoped CSS?

The shadow DOM is a set of JavaScript APIs that provides component encapsulation. The shadow DOM can be used in a component by setting the shadow option to true in the component decorator. This allows you to style your component without having to worry about those styles bleeding into other components. It also means that outside styles will not affect your component.

Scoped CSS is a proxy for style encapsulation. It works by appending a data attribute to your styles to make them unique and thereby scope them to your component. Stencil uses scoped CSS for browsers that do not support the shadow DOM. Depending on your use case, scoped CSS may be more appropriate than the shadow DOM as it allows outside styles to be applied to your component. To enable scoped CSS, set the scoped option to true in the component decorator.

For more details about shadow DOM, scoped CSS, and styling in Stencil in general, check out the Stencil styling docs.