Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Iasi code camp 12 october 2013 shadow dom - mihai bîrsan


Published on

Published in: Technology, Design
  • Be the first to comment

Iasi code camp 12 october 2013 shadow dom - mihai bîrsan

  1. 1. The Shadow DOM A Talk about Web Components in HTML5 Mihai Bîrsan October 2013
  2. 2. The Shadow DOM A Talk about Web Components in HTML5 Mihai Bîrsan October 2013
  3. 3. Previously... • Mutation Observers help observe changes in the DOM • The M in DOM is for Model • We can’t have models in the DOM
  4. 4. There is cruft in your HTML • Modern applications like GMail
  5. 5. There is cruft in your HTML • Frameworks like ExtJS
  6. 6. There is cruft in your HTML • HTML can be beautiful again –Readable –Meaningful • We can encapsulate presentation and behavior into components
  7. 7. Solutions from the future 1. Shadow DOM 2. HTML Templates 3. Custom Elements
  8. 8. Warning! • We’re about to talk about The Edge! • The Edge is bound to change rapidly • DO NOT use in production • Polyfills are available for the technologically impatient
  9. 9. 2. It’s nice to stamp out DOM TEMPLATES
  10. 10. Defining templates <template id="tweet-template"> <div class="tweet"> <img class="profile-picture" src="" alt="" /> <a class="author" href=""> <small class="shorthand"></small></a> <p class="tweet-content"></p> <a class="time-ago" href=""></a> </div> </template>
  11. 11. Like regular templates, but DOM • “inert” DOM tree: parsed but not interpreted –no images or stylesheets loaded –no scripts executed • can be cloned into to other nodes
  12. 12. Using templates via JS var t = document.querySelector('#tweet-template'); tweets.forEach(function (myTweet) { var tweetNode = t.content.cloneNode(true); populateNode(tweetNode, myTweet); document.body.appendChild(tweetNode); }); // t.innerHTML is also also available
  13. 13. Like regular templates, but DOM • Very efficient –cloning with nodes, not parsing –resources are loaded late, only when needed
  14. 14. 3. Bringing it home with CUSTOM ELEMENTS
  15. 15. Creating HTML elements • Registered via JavaScript var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function () { } } }); var MyElement = document.register('my-element', { prototype: proto }); • Must contain a dash in the name
  16. 16. Lifecycle callbacks method • createdCallback –an instance of the element is created • enteredViewCallback –an instance was inserted into the document • leftViewCallback –an instance was removed • attributeChangedCallback –an attribute of the node was added, removed, or updated
  17. 17. Working with custom elements • Can be instantiated declaratively <my-element></my-element> • or with JavaScript document.body.appendChild(new MyElement());
  18. 18. Extending HTML elements • Can also extend existing elements var MegaButton = document.register('mega-button', { prototype: Object.create(HTMLButtonElement.prototype) }); • Which is used like this <button is="mega-button"></button>
  19. 19. A brief note on FOUC • Flash of Unstyled Content • Unresolved HTML elements –that’s why they must contain a dash –target in CSS with :unresolved
  20. 20. 1. The most awesome and most important piece SHADOW DOM
  21. 21. What’s a Shadow DOM? • A tree of nodes attached to a host node, but is not a child • Meant to abstract away the presentation layer from it’s semantics
  22. 22. How does Shadow DOM work? • Through composition before layout and rendering • The shadow tree replaces all of the host’s content • The host’s children are pulled into the shadow tree
  23. 23. The two trees <!-- The main DOM tree --> <div class="tweet"> ▶#document-fragment <img class="profile-picture" src=" <a class="author" href="">VeryBritishProblems <sm <p class="tweet-content">Watching with quiet sorrow as you receive a different hairc <a class="time-ago" href=" </div>
  24. 24. The two trees <!-- The Shadow DOM tree --> <div class="left-column"> <content select="img.profile-picture"></content> </div> <div class="right-column"><content></content></div> <div class="tools"> <button class="btn-reply">Reply</button> <button class="btn-retweet">Retweet</button> <button class="btn-fav">Favorite</button> </div>
  25. 25. The two trees .tweet .left-column .right-column content content .brn-reply .tweet-content .time-ago .profile-picture .tools .btn-retweet .btn-fav
  26. 26. Styling in the shadow • You have control over whether styles from the host pass-through • You can also reset all styles at insertion points • You can also target specific selected nodes from the host with content:distributed(selector)
  27. 27. Adding Shadow DOM via JS createdCallback: { value: function () { // Create the shadow DOM var t = document.querySelector('#tweet-template'); this.shadowRoot = this.createShadowRoot(); this.shadowRoot.appendChild(t.content.cloneNode(true)); } }
  29. 29. Web Components  Custom Elements + Shadow DOM + Templates = Web Components
  30. 30. Let’s model something 0
  31. 31. What’s the markup? <oracle-card> <name>Pacifism</name> <cost>1W</cost> <img class="illustration" src="img/Pacifism.jpg" alt="" /> <types>Enchantment</types> <subtypes>Aura</subtypes> <rules> <rule><shorthand>Enchant creature</shorthand></rule> <rule>Enchanted creature can't attack or block.</rule> </rules> <flavor>For the first time in his life, Grakk felt a little warm and fuzzy inside.</flavor> </oracle-card>
  32. 32. DEMO Well, you just had to be there... But for good measure, check my GitHub. I’ll post it there soon
  33. 33. In conclusion • The future of the web is awesome • With components we can encapsulate and separate presentation from content • Web components are much easier to reuse without inadvertent interference
  34. 34. You can use these things today! • Test the future of the web with Firefox Nightly and Chrome Canary • Add polyfills with Polymer to use web components in any browser
  35. 35. It’s that time when you ask me questions and I hand out prizes! THANK YOU! PLEASE FILL YOUR REVIEW FORMS!