Comparison
Scoped stylesvsShadow DOM
Scoped styles
the class in the output is a hashed string, so nothing else on the page can accidentally match it.
Rewriting class names at build time so a component's styles cannot collide with any other component's. It gives you the isolation that naming conventions used to approximate by hand, without giving up plain CSS files. The trade is that the class you see in the browser is not the class you wrote, and styling a child component from a parent now requires an explicit escape hatch.
Full entry →Shadow DOM
your page's stylesheet had no effect inside the widget because its DOM was in a separate tree.
An encapsulated subtree attached to an element, with its own scope for styles and ids that page CSS cannot reach into. It gives genuine isolation rather than the convention-based kind, which is why it underpins web components and embedded widgets. That isolation cuts both ways: theming requires explicit parts and custom properties, and selectors, forms and focus all behave differently across the boundary.
Full entry →