When and why to use shadowDom?

When to use the shadow Dom?

By creating a UI solution that coexists in the web ecosystem such as HTML, libraries and frameworks, since the shadowDOM allows you to:

1. Protect your UI from libraries like React, Vue and others

2. Associate styles natively, efficiently and safely

3. 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.

Why use shadowDOM?

To protect our component at the DOM manipulation level and take advantage of some of the benefits of the shadowDOM such as:

1. Slot management

2. CSS appearance of web component.

3. 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.

Slot management

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:

🔀pageSlot

CSS appearance of web component.

The shadowDOM allows you to do something fantastic, protect your CSS from global styles, this has 2 great advantages:

1. The appearance of our component will not be affected by global CSS declarations.

2. Customization protected by CSS custom Properties

We invite you to learn more about handling styles in atomic through the following guide:

pageCSS Styles with Shadow DOM