如何查看与阴影dom相关的html和css

Question

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

现在我以编程方式更改与组件关联的html。但是因为我无法在浏览器中看到相关的html。所以我无法在html中调试更改。

我想知道如何启用与自定义html（shadown dom）元素相关联的html的显示。是否有支持此功能的JavaScript？

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

Answer 1

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

1. 右键单击您的页面，然后选择＆＃34; Inspect Element＆＃34;提出DevTools

2. 点击DevTools窗口右上角的设置齿轮

3. 在＆＃34; Elements＆＃34;标题，查找并启用＆＃34;显示阴影DOM＆＃34;复选框。

现在您应该在DevTools的Elements窗格中看到#documents-fragments。那些是你的暗影DOM。