Shedding Light on the Shadow Dom

7904a5ddb645476c84293c6c9ebde9c2?s=47 Dave
June 01, 2016

Shedding Light on the Shadow Dom

We have many problems that exist in modern CSS architecture including a lack of encapsulation, no facility to accurately remove dead code and of course, specificity conflicts.

I will explain how the Shadow Dom specification can help to solve them by crafting reusable components using various pseudo selectors and slots. I'll also show you how to create an API for your components that consumers can access using CSS Custom Properties.

7904a5ddb645476c84293c6c9ebde9c2?s=128

Dave

June 01, 2016
Tweet

Transcript

  1. Shedding light on the Shadow DOM @DaveOrDead

  2. @DaveOrDead

  3. @DaveOrDead Disclaimers...

  4. @DaveOrDead Who’s walking in the light now?

  5. @DaveOrDead Why Shadow Dom?

  6. None
  7. <div id="notification"> <h3>New Message in #customer-support</h3> <p>Have you guys thought

    about using Web Components yet?</p> <button>Reply</button> </div>
  8. None
  9. var notification = document.getElementById('notification'); var root = notification.createShadowRoot(); // attachShadow()

    root.innerHTML = 'HOLD THE DOOR!';
  10. None
  11. None
  12. None
  13. root.innerHTML = ` <div class="wrapper"> <button> <svg> ... </svg> <span>Close</span>

    </button> <content></content> <p>1 minute ago</p> </div>`;
  14. None
  15. \

  16. Slots

  17. root.innerHTML = ` <div class="wrapper"> <button> <svg> ... </svg> <span>Close</span>

    </button> <slot></slot> <p>1 minute ago</p> </div>`;
  18. <div id="notification"> <h3 slot="heading">New Message in #customer-support</h3> <button slot="action">Reply</button> <p>Have

    you guys thought about using Web Components yet?</p> </div>
  19. root.innerHTML = ` <div class="wrapper"> <button> <svg> ... </svg> <span>Close</span>

    </button> <slot name="heading"></slot> <slot></slot> <slot name="action"></slot> <p>1 minute ago</p> </div>`;
  20. \

  21. root.innerHTML = ` … <style> :host { background-color: #3498db; border-radius:

    5px; line-height: 1.4; width: 25rem; } <style>`;
  22. None
  23. :host(.is-active) { border: 10px solid pink; }

  24. None
  25. :host-context(.house-tyrell-theme) { background-color: green; }

  26. None
  27. Shadow Root

  28. root.innerHTML = '<style> ... button {\ /* Styles */ }\

    p {\ /* Styles */ }\ ... </style>';
  29. <p> <button> <button> <button> <p>

  30. None
  31. Styles are scoped to the Shadow Root!

  32. Styling the ::content

  33. root.innerHTML = `<style> ... ::content h3, ::content p { color:

    #fff; margin-top: 0; padding-top: 0; } ... </style>`;
  34. Styling the ::content // ::slotted

  35. root.innerHTML = `<style> ... ::slotted h3, ::slotted p { color:

    #fff; margin-top: 0; padding-top: 0; }\ ... </style>`;
  36. None
  37. #notification::shadow p #notification / deep / p #notification >>> p

  38. #notification::shadow p #notification / deep / p #notification >>> p

    DEPRECATED
  39. Custom Properties (aka CSS variables)

  40. root.innerHTML = `<style> ... button svg { fill: var(--notification-close-button-color, #fff);

    height: var(--notification-close-button-size, 1.5rem); width: var(--notification-button-size, 1.5rem); } p { color: var(--notification-text-color, #fff); text-align: right; } ... </style>`;
  41. :root { --notification-close-button-color: orange; --notification-close-button-size: 2rem; --notification-text-color: yellow; }

  42. None
  43. Can I use it? Chrome - Yes Opera - Yes

    Firefox - Feature Flag Safari - In Progress Edge - Vote for it
  44. Polyfills Webcomponents.js Polymer X-Tag

  45. Useful Links https://webkit.org/blog/4096/introducing-shadow-dom-api/ https://hacks.mozilla.org/2015/06/the-state-of-web-components/ https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal. md https://drafts.csswg.org/css-scoping/#intro @DaveOrDead

  46. Thanks! @DaveOrDead