Styling the shadow DOM without dragons

Traditionally, CSS stylesheets have a terrible opinion about style encapsulation: the only thing stopping one element’s style from stomping over another’s is a “well chosen class name”.
The Shadow DOM fixes this by building a little castle and a moat around each element, so that styles can’t get in and out of the web component castle. But what happens if you _do_ want to style this custom element? How do you cross the moat? Custom properties, that’s how.

Video: https://www.youtube.com/watch?v=IbOaJwqLgog

Transcript

1. how to without STYLE ELEMENTS DRAGONS
2. @notwaldorf
3. I CSS
4. well, actually I COPYING CSS
5. <button></button>
6. <link rel=”stylesheet” … href=“fancy.css” /> <button></button>
7. <button class=“fancy”></button> <link rel=”stylesheet” … href=“fancy.css” />
8. <button class=“fancy”></button> <button></button> <link rel=”stylesheet” … href=“fancy.css” />
9. <link rel=”stylesheet” … href=“shiny.css” /> <button class=“fancy”></button> <button></button> <link rel=”stylesheet” … href=“fancy.css” />
10. <button class=“fancy”></button> <button class=“fancy”></button> <link rel=”stylesheet” … href=“shiny.css” /> <link rel=”stylesheet” … href=“fancy.css” />
11. <link rel=”stylesheet” … href=“fancy <link rel=”stylesheet” … href=“shiny.css <button <button
12. spoilers CSS SCOPING BLOWS
13. thei SHADOW DOM
14. it’s aicastlei! SHADOW DOM
15. <button class=“fancy”></button>
16. <dom-module id="fancy-button"> <template> <style> . shiny {…} </style> </template> </dom-module>
17. <dom-module id="fancy-button"> <template> <style> . .fancy {…} </style> </template> </dom-module>
18. <dom-module id="fancy-button"> <template> <style> . a {…} </style> </template> </dom-module>
19. <button class=“fancy”></button> <button class=“fancy”></button> <link rel=”stylesheet” … href=“shiny.css” /> <link rel=”stylesheet” … href=“fancy.css” />
20. <fancy-button></fancy-button> <shiny-button></shiny-button>
21. yay! <fancy-button></fancy-button> <shiny-button></shiny-button>
22. p.s. SUPER OLD NEWS
23. <input type=“date”>
24. <input type=“date”>
25. input { color: red; font-size: 30px; } <input type=“date”>
26. input { color: red; font-size: 30px; } <input type=“date”>
27. input #picker { less-ugly: yes; } <input type=“date”>
28. input #picker less-ugly } <input
29. omg how do i GET INSIDE THE CASTLE
30. with dragons! GET INSIDE THE CASTLE
31. DRAGONS mistakes wereimadei
32. ::SHADOW /DEEP/ mistakes wereimadei
33. <fancy-button></fancy-button>
34. fancy-button /deep/ fancy-div.fancy > .button { background: red; } <fancy-button></fancy-button>
35. fancy-button /deep/ fancy-div.fancy > .button { background: red; } <fancy-button></fancy-button>
36. with dragons! GET INSIDE THE CASTLE
37. lol no GET INSIDE THE CASTLE
38. GET INSIDE THE CASTLE useiaibridgei
39. theiplatformyiway CSS PROPERTIES
40. <dom-module id="fancy-button"> <template> <style> . </style> </template> </dom-module>
41. <dom-module id="fancy-button"> <template> <style> . </style> </template> </dom-module> .button { background: red; }
42. <dom-module id="fancy-button"> <template> <style> . </style> </template> </dom-module> .button { background: var(- -fancy-button-background); }
43. <dom-module id="fancy-button"> <template> <style> . </style> </template> </dom-module> .button { background: var(- -fancy-button-background, red); }
44. <dom-module id="fancy-button"> <template> <style> . </style> </template> </dom-module> fancy-div.fancy > .button { background: var(- -fancy-button-background, red); }
45. <fancy-button></fancy-button>
46. <style is=“custom-style”> <style> <fancy-button></fancy-button> fancy-button { - -fancy-button-background: cornflowerblue; }
47. <style is=“custom-style”> <style> <fancy-button></fancy-button> #submitButton { - -fancy-button-background: cornflowerblue; }
48. <style is=“custom-style”> <style> <fancy-button></fancy-button> #submitButton { - -fancy-button-background: cornflowerblue; }
49. <style is=“custom-style”> <style> <fancy-button></fancy-button> #submitButton { - -fancy-button-background: cornflowerblue; }
50. <style is=“custom-style”> shiny-button { - -shiny-button-background: cornflowerblue; } <style> <fancy-button></fancy-button>
51. PROTIP: THEMES
52. <style is=“custom-style”> :root { - -dark-primary-color: #303f9f; - -light-primary-color: #c5cae9; - -accent-color: #ff4081; - -disabled-text-color: #bdbdbd; - -divider-color: #e0e0e0; } <style>
53. <style is=“custom-style”> some-element { color: var(- -dark-primary-color); } some-element [disabled] { color: var(- -disabled-text—color); } <style>
54. THERE’S A LOT OF CSS theithing is
55. <dom-module id="fancy-button"> <template> <style> </style> </template> </dom-module> .button { background: var(- -fancy-button-background); }
56. <dom-module id="fancy-button"> <template> <style> </style> </template> </dom-module> .button { background: var(- -fancy-button-background); padding: var(- -fancy-button-text-padding); }
57. <dom-module id="fancy-button"> <template> <style> </style> </template> </dom-module> .button { background: var(- -fancy-button-background); padding: var(- -fancy-button-text-padding); opacity: var(- -fancy-button-opacity); }
58. <dom-module id="fancy-button"> <template> <style> </style> </template> </dom-module> .button { background: var(- -fancy-button-background); @apply(- -fancy-button); }
59. <style is=“custom-style”> #submitButton { - -fancy-button-background: cornflowerblue; } <style> <fancy-button></fancy-button>
60. <style is=“custom-style”> #submitButton { - -fancy-button-background: cornflowerblue; } <style> <fancy-button></fancy-button> - -fancy-button: { padding: 30px; };
61. <style is=“custom-style”> #submitButton { - -fancy-button-background: cornflowerblue; } <style> <fancy-button></fancy-button> - -fancy-button: { padding: 30px; };
62. <style is=“custom-style”> #submitButton { - -fancy-button-background: cornflowerblue; } <style> <fancy-button></fancy-button> - -fancy-button: { padding: 30px; }
63. <style is=“custom-style”> #submitButton { - -fancy-button-background: cornflowerblue; } <style> <fancy-button></fancy-button> - -fancy-button: { padding: 30px; };
64. BRIDGES DRAGONS not you want
65. @notwaldorf