HTML Component Model & the Shadow DOM

At Fronteers ’11, Alex Russel gave a great talk about the Shadow DOM (relevant slides starting from slide 32).

Jake Archibald, who also gave an awesome presentation at Fronteers, provides us a nice writeup on the subject, along with a very practical example:

This is an <audio> element, or at least its implementation in Google Chrome. As you can see it has buttons with behaviours & a slider control. These are implemented as DOM elements in Chrome (and other browsers), but they have a magic invisibility cloak.

We can’t access the buttons or slider control using document.querySelector or similar, they’re not visible in Web Inspector / Firebug. Also, they have a magic style forcefield:

audio * {
    border: 3px solid red;

The above has no effect on the controls of the audio element. Magic!

Soon it won’t be magic, it’ll be toys.

HTML Component Model & the Shadow DOM →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.