polyfiddle

Polymer boilerplate for jsFiddle

HTML

<script>
 Polymer = {
   dom: 'shadow',
   lazyRegister: true,
   suppressBindingNotifications: true,
   suppressTemplateNotifications: true,
   useNativeCSSProperties: true,
};
</script>
    <base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/paper*+polymerelements+:master/iron*+polymerelements+:master/app*+polymerelements+:master/neon*+polymerelements+:master/components/">
<link href="polymer/polymer.html" rel="import">

<style>
  #example2 {
    --bg-color: blue;
  }
</style>

<dom-module id="x-example">
  <template>
    <style>
      :host {
        display: block;
      }
      dialog::backdrop {
        background-color: var(--bg-color, red);
      }
      div {
        background-color: var(--bg-color, red);
      }
    </style>
    <dialog>Dummy dialog (backdrop always red)</dialog>
    <div>Div background always works</div>
    <button on-click="onOpenClick_">Open me</button>
  </template>
</dom-module>

<p>Example 1, works, styling hardcoded within Shadow DOM</p>
<x-example></x-example>
<p>Example 2, overriding the style from the outside fails</p>
<x-example id="example2"></x-example>

JavaScript

Polymer({
  is: 'x-example',
  
  onOpenClick_: function() {
    this.$$('dialog').showModal();
  },
});