Menu
In the tutorials I see only the benefits of Shadow DOM, but there should be drawbacks as well. In which cases should we avoid using Shadow DOM?
501
Style isolation is a benefit if you want it but a drawback if a user wants to style a component with Shadow DOM from a global CSS stylesheet. DOM Shadowing is a benefit in some cases, but a drawback if an external script/library or extension needs to parse or select the content.
Shadow DOM is very important for web components because it allows specific sections of the HTML document to be completely isolated from the rest of the document. This means CSS styles that are applied to the DOM are not applied to the Shadow DOM, and vice versa.
With shadow DOM, the performance stays constant instead of scaling with the size of the DOM or the complexity of the CSS. Shadow DOM allows you to use whatever CSS selectors you want and not worry about performance.
In short, the shadow DOM is a browser technology whose main objective is to provide encapsulation when creating elements. On the other hand, the virtual DOM is managed by JavaScript libraries—e.g., React—and it's mostly a strategy to optimize performance.
Shadow DOM features can be seen as drawback as much as benefits:
Style isolation is a benefit if you want it but a drawback if a user wants to style a component with Shadow DOM from a global CSS stylesheet.
DOM Shadowing is a benefit in some cases, but a drawback if an external script/library or extension needs to parse or select the content.
There are many 3rd party libraries (or extensions) that won't work with Shadow DOM content because they were not designed to deal with it, or need some additional configuration to work with Shadow DOM.
Examples:
Also, extensions that parse HTML will be blocked at the Shadow DOM boundary: a benefit if you don't want to spied, a drawback if you consider them as a useful service.
Event propagation is different inside and outside the Shadow DOM. So you may have some difficulties dealing with UI events.
Example :
Conclusion
Use Shadow DOM only if you want CSS style or DOM isolation.
Don't use Shadow DOM if you need to interact with some not compliant third party components or library.
66
Uh, ah, this technology's specification has not stabilized and is not supported by many browsers. I would call that a drawback.
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
For now I would say; Avoid in most cases, except when you want to experiment with new stuff and it is not for the production environment.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
