Shadow Dom - Style Encapsulation
Cookies can be used to store data and transfer data to the server.
Web Components
Shadow DOM is a category of Web Component technology used for encapsulating and isolating a component’s DOM and CSS. Shadow DOM creates a scoped subtree of the existing document’s DOM, preventing external scripts and styles from interfering with the component’s internals which can make it harder to automate.
Web Components are used for building modular, reusable components that can be dropped into any project without style conflicts.
Key Features of a Web Component:
- Encapsulation: Styles and scripts within the Shadow DOM are scoped and do not leak out to the rest of the page.
- Isolation: Prevents global scripts from accidentally breaking the component and vice-versa.
- Composition: Allows for the use of
<slot>elements to define where child elements should be rendered within the component’s internal DOM.
Shadow Dom - Custom Web Component
Web Components and custom elements are used to create re-usable components.
Shadow Dom - Interactive Web components
Shadow DOM can contain both styles and functionality in complete isolation