html - Shadow DOM 让我们实现了什么？

Question

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

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

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

Answer 1

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

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

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

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