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 →