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:
[css]audio * {
border: 3px solid red;
}[/css]

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 →

Elsewhere , , ,

One Response to HTML Component Model & the Shadow DOM

  1. Pingback: Shadow DOM introduction | Bram.us

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>