Polymer 1.x:如何使用 Polyfills 填充对 CSS 变量的支持

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

我想在 Bootstrap 主题中使用 CSS 变量,以便将来可以方便地更改主题的配色方案。

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

问题

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

我使用 Yeoman Polymer Generator 的 Polymer Starter Kit 构建了这个项目。我用 Bootstrap 主题替换了 PSK app 目录,并将原来的应用程序目录重命名为 app1,将主题目录重命名为 app.

我知道一切都已正确配置,因为使用 Firefox 时它按预期工作。所以我只需要专注于让 Polyfill 工作。

我在 index.html 中尝试了以下方法。但是没用。

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>

编辑: 其他问题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?

尝试使用它(当您通过 CDN link CSS 时效果更好):https://poly-style.appspot.com/demo/ or this is probably better in your case: https://github.com/MaKleSoft/gulp-style-modules

I found this demo in the github repository for Polystyles.

https://github.com/PolymerLabs/polystyles/blob/master/demo/elements.html

它使用以下导入,这表明 url 参数应该 link 到 .css 文件。

<link rel="import"
href="../?id=polymer-styles&url=https://www.polymer-project.org/css/polymer.css">