问题描述
我正在使用 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.
右键单击您的页面并选择检查元素"以调出 DevTools
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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!