Encapsulation

Widget styles have the potential to override styles in Workspaces. For this reason, Widget developers must ensure their styles are scoped to their component.

How this is achieved varies by framework:

Angular

Set ViewEncapsulation to 'Emulated'. See Developing Angular Widgets for further details.

React

Follow a class naming methodology (BEM, SMACCS, OOCSS, etc.) or use a third party library such as CSS Modules.

Lit Element

LitElement templates are rendered into a shadow tree by default. Styles scoped to an element’s shadow tree don’t affect the main document or other shadow trees.