Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Monica Dinculescu

September 15, 2015
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

Transcript

  1. <style is=“custom-style”> :root { - -dark-primary-color: #303f9f; - -light-primary-color: #c5cae9;

    - -accent-color: #ff4081; - -disabled-text-color: #bdbdbd; - -divider-color: #e0e0e0; } <style>
  2. <dom-module id="fancy-button"> <template> <style> </style> </template> </dom-module> .button { background:

    var(- -fancy-button-background); padding: var(- -fancy-button-text-padding); }
  3. <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); }