How to view html and css associated with shadow dom

Question

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

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.

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?

I am using Dartium to view the output.

Answer 1

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

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

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

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

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