javascript - 如何查看与shadow 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. 右键单击您的页面并选择“检查元素”以调出 DevTools

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

3. 在“元素”标题下，找到并启用“显示 Shadow DOM”复选框。

现在您应该在 DevTools 的 Elements 窗格中看到 #document-fragments。这些是你的 Shadow DOM。