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.



Monica Dinculescu

September 15, 2015


  1. 3.
  2. 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>
  3. 56.

    <dom-module id="fancy-button"> <template> <style> </style> </template> </dom-module> .button { background:

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