Comparison
Custom elementvsShadow DOM
Custom element
you defined a tag with a dash in it and used it in HTML like any built-in element.
A user-defined HTML element with its own lifecycle callbacks, registered under a hyphenated name. It is framework-independent and long-lived, which makes it the right vehicle for a design system shared across applications with different stacks. The rough edges are real: attributes are strings, passing rich data and events across the boundary is awkward, and server rendering one is still not straightforward.
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 →