How do you see the pre-DOM markup of HTML5 tags in Chrome and Firefox dev tools

Question

I was reading an article about the HTML5 progress element at css-tricks.com and about 1/8 down the page I noticed an example of how to style the element using the two pseudo-classes -webkit-progress-bar and -webkit-progress-value. From the screenshot you can see that the classes are used with a pseudo-attribute on two div containers but when I use the progress element in my own example I can't see the divs anywhere.

Is there a clever setting in Chrome dev tools that I need to enable or do I need to rely on a javascript DOM-event to view the markup? Is there a similar solution in Firebug?

Answer 1

It's called the shadow DOM. To access it in Chrome/Chromium open the DevTools settings and check "Show user agent shadow DOM"

and the result is: