[x] what benefits do web components give over traditional frameworks e.g. React
Web components are independent of the UI framework. A webcomp can be re-used across various frameworks or with none at all.
[x] what is shadow DOM and how does it work?
The shadow DOM allows you to encapsulate your web component and hide away the child content of your web component. This includes markup structure, styling and behavior.
Shadow host: The regular DOM node that the shadow DOM is attached to.
Shadow tree: The DOM tree inside the shadow DOM.
Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
Shadow root: The root node of the shadow tree.
[x] how would you theme a web component? e.g. set colour globally for all components
Outcomes
Web components are independent of the UI framework. A webcomp can be re-used across various frameworks or with none at all.
The shadow DOM allows you to encapsulate your web component and hide away the child content of your web component. This includes markup structure, styling and behavior.
Shadow host: The regular DOM node that the shadow DOM is attached to.
Shadow tree: The DOM tree inside the shadow DOM.
Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
Shadow root: The root node of the shadow tree.
[x] how would you theme a web component? e.g. set colour globally for all components
Using the