Passing Custom Css To Polymer Element

I would like to be able to pass CSS width to my custom element's shadow DOM. The custom element, called my-list, is defined as below:

Solution 1:

CSS variable names need to start with --

<dom-module id="my-list">
  <template><style>#container {
        width: var(--my-list-width, 100%);
      }
    </style><divid="container"><content></content></div></template><script>Polymer({
      is: 'my-list'
    });
  </script>
</dom-module>

Hint: the <style> tag should be within the <template> tag (this was explained differently a while back in the docs but changed later).

---

If you use Polymer features you need to add is="custom-style" for Polymer to know it needs to process (polyfill) the styles inside this style tag.

<styleis="custom-style"type="text/css">/* .medium { I think this should work but I fear it doesn't - haven't investigated yet*/:root { /*this works */--my-list-width: 500px;
  }
</style><my-listclass="medium"><list-entry>1</list-entry><list-entry>2</list-entry></my-list>

Share