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.

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?
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>
9. var notification = document.getElementById('notification'); var root = notification.createShadowRoot(); // attachShadow() root.innerHTML = 'HOLD THE DOOR!';
13. root.innerHTML = ` <div class="wrapper"> <button> <svg> ... </svg> <span>Close</span> </button> <content></content> <p>1 minute ago</p> </div>`;
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>`;
23. :host(.is-active) { border: 10px solid pink; }
25. :host-context(.house-tyrell-theme) { background-color: green; }
27. Shadow Root
28. root.innerHTML = '<style> ... button {\ /* Styles */ }\ p {\ /* Styles */ }\ ... </style>';
29. <p> <button> <button> <button> <p>
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>`;
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; }
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