Styling the shadow DOM without dragons

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

053e75a5b48b44d6dd0612795dfb326d?s=128

Monica Dinculescu

September 15, 2015
Tweet

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