如何查看与shadow dom相关的html和css [英] How to view html and css associated with shadow dom

问题描述

我正在使用 angular-dart 的 @NgComponent 创建自定义 html(shadown dom) 元素.

I am using a @NgComponent of angular-dart to create a custom html(shadown dom) element.

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

Now i am programatically changing the html associated with the component. But as i am not able to see associated html in the browser. So i am not able to debug the change in html.

我想知道我们如何启用与自定义 html(shadown dom) 元素关联的 html 的显示.是否有启用此功能的 javascript?

I want to know how do we enable displaying of html associated with custom html(shadown dom) element. Is there a javascript that enables this?

我正在使用 Dartium 查看输出.

I am using Dartium to view the output.

推荐答案

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

To see the Shadow DOM in Dartium and Chrome, you must enable it in DevTools.

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

1. Right-click on your page and select "Inspect Element" to bring up DevTools

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

Click the Settings gear in the top-right corner of the DevTools window

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

Under the "Elements" heading, find and enable the "Show Shadow DOM" checkbox.

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

Now you should see #document-fragments in the Elements pane of DevTools. Those are your Shadow DOM.

这篇关于如何查看与shadow dom相关的html和css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！