Shadow DOM 让我们达到什么目的?

What does Shadow DOM let us achieve?

我认为 shadow DOM 可以让我们实现样式封装并隐藏 HTML 组件的实现。

但是当我在 chrome 中检查 shadow root 时,我可以看到组件的 HTML。

那么它究竟帮助我们实现了什么?难道只是样式封装?

当然,DevTools 允许您调查影子 DOM 但是如果您得到 HTML for index.html querySelector('body').innerHTML 影子 DOM元素不包括在内。

您明确需要切换到自定义元素的影子 DOM 才能访问该 HTML。

Shadow DOM 并不是要对其他开发人员隐藏您的元素实现,而是要对 CSS、JS 或其他可能意外读取或操作它的方式隐藏它。

这允许将整个应用程序的 DOM 的复杂性分解为更易于管理的较小部分。