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.querySelectoror 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.
