When and why to use shadowDom?
PreviousHow to declare events for your component at the type level for TSX?NextCan I use Atomico in browsers without ESM support?
Last updated
Last updated
By creating a UI solution that coexists in the web ecosystem such as HTML, libraries and frameworks, since the shadowDOM allows you to:
Protect your UI from libraries like React, Vue and others
Associate styles natively, efficiently and safely
Reference lightDOM content in the shadowDOM
Webcomponents with Shadow DOM are ideal for creating cross UI solutions as they coexist without conflict with the entire web ecosystem.
To protect our component at the DOM manipulation level and take advantage of some of the benefits of the shadowDOM such as:
Slot management
CSS appearance of web component.
The shadowDOM is ideal for creating components that interact with libraries like React, Vue or others. The ShadowDOM protects the DOM it contains from manipulations generated by other libraries.
Slots allow us to reflect existing nodes in the lightDOM into the shadowDOM, example:
This is really useful, since we can group slots according to their name in a specific place of the webcomponent.
We invite you to learn more about slots through the following guide:
The shadowDOM allows you to do something fantastic, protect your CSS from global styles, this has 2 great advantages:
The appearance of our component will not be affected by global CSS declarations.
Customization protected by CSS custom Properties
We invite you to learn more about handling styles in atomic through the following guide:
