Shadow DOM让我们实现了什么？

Question

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

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

那究竟是什么帮助我们实现的？它只是样式封装吗？

Answer 1

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

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

Shadow DOM不是要将你的元素实现隐藏起来，而是将其隐藏在CSS，JS或其他可能意外阅读或操纵它的方法之外。

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