如何查看与shadow-dom关联的html和css

How to view html and css associated with shadow dom

本文关键字：html css 关联 何查看 shadow-dom      更新时间：2023-09-26

我正在使用angular dart的@NgComponent来创建一个自定义html（shadown-dom）元素。

现在我正在用程序更改与组件相关联的html。但由于我无法在浏览器中看到相关的html。所以我无法调试html中的更改。

我想知道我们如何启用与自定义html（shadown-dom）元素相关联的html的显示。有没有javascript可以实现这一点？

我正在使用Dartium来查看输出。

要在Dartium和Chrome中查看Shadow DOM，必须在DevTools中启用它。

  1. 右键单击您的页面并选择"检查元素"以打开DevTools

  2. 点击DevTools窗口右上角的Settings gear

  3. 在"元素"标题下，找到并启用"显示阴影DOM"复选框。

现在，您应该在DevTools的Elements窗格中看到#document片段。这些是你的影子DOM。

相关文章：