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.