问题
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?
回答1:
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:
- Disqus comments integration
- CodeMirror editor integration
- Wiris math editor integration
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 diffuclties to deal with UI events.
Example :
- TinyMCE integration
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.
回答2:
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.
来源：https://stackoverflow.com/questions/45917672/what-are-the-drawbacks-of-using-shadow-dom