Shadow DOM

Short presentation on the basics of shadow DOM and how we can use it today

Transcript

1. DOM
2. <element> </element> <“Shadowroot”> <element> <element></element> </element> <element></element> ... </”shadowroot”>
3. ish
4. function Contacts() { this.element = document.createElement('div'); this.element.className = 'contacts widget'; var shadow = new ShadowRoot(this.element); var users = this.elementshadow.appendChild(document.createElement('ul')); this.loadUsers(MAX_USERS, function(user) { var li = document.createElement('li'); // Populate [li] with data from the [user] object. // … }); } shadow.applyAuthorStyles = true;
5. Breaking in
6. • -webkit-appearance • -moz-appearance • IE?
8. State • Working Draft • Webkit, Gekko, Presto?, !Trident • Buggy application • Limited access
9. Summa Summarum • kun en shadow root pr. element • men multiple shadow subtrees er ok! • tilføjet i stacking order • apply-author-styles giver adgang to the shadow elements • selectors må ikke krydse shadow bound selv med a-a-s
10. Looky Looky
11. Resources • http://glazkov.com/2011/01/14/what-the- heck-is-shadow-dom/ • http://www.w3.org/TR/shadow-dom/ • http://dglazkov.github.com/Tabs/
12. Thanks