Search code examples
polymerpolymer-1.0polyfillspolymer-starter-kitcss-variables

Polymer 1.x: How to use Polyfills to shim support for CSS variables

I want to use CSS variables in a Bootstrap theme so I can conveniently change the theme's color scheme in the future.

This chart shows that Firefox is the only browser at the moment that supports CSS variables.

Question

How do I use Polymer's Polyfills to shim cross-browser support for CSS variables?

I scaffolded this project using the Polymer Starter Kit from the Yeoman Polymer Generator. I replaced the PSK app directory with the Bootstrap theme and renamed the original app directory to app1 and the theme directory to app.

I know everything is configured correctly because it works as expected using Firefox. So I just need to focus on getting the Polyfills to work.

I tried the following in my index.html. But it doesn't work.

index.html 
<head>
  ...
  <link rel="stylesheet" type="text/css" href="css/theme-mod.css">
  ...
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <!-- Tried with and without the following -->
  <script type="text/javascript" src="scripts/app.js"></script>   
  ...
</head>

Edit: Other questions relative to Polystyles.

The documentation is confusing. For example, what is the url parameter supposed to be and do? Is it like an import? Can it point to an internal path or file if my dom-module is a local file? Also, is the dom-module a .css file or is it a .html file like the other DOM modules / elements I've seen?

Solution

  • Try to use this (better when you link CSS via a CDN): https://poly-style.appspot.com/demo/ or this is probably better in your case: https://github.com/MaKleSoft/gulp-style-modules