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

StackOverflow https://stackoverflow.com/questions/23536478

  •  17-07-2023
  •  | 
  •  

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?

Was it helpful?

Solution

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

Chrome DevTools

and the result is:

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top