css - Polymer 2.0 样式模块共享样式在网页上打印 css 源

Question

我正在使用带有聚合物 2.0 的样式模块（https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules）。

风格正在发挥作用。然而，在 Chrome 中，css 内容会打印到网页上，看起来像乱码。在 Firefox 中完美运行。如何在 Chrome 中解决此问题？提前致谢。

这是我所拥有的：

lbw-css-styles.html

<dom-module id="lbw-css-styles">
  <template>
    <style>
    :root {
    background-color:green;
...
    </style>
  </template>
</dom-module>

page-test.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="lbw-css-styles.html">

<dom-module id="page-test">
  <template>
     <style include="lbw-css-styles">
...
     </style>
  </template>

  <script>
    Polymer({
      is: 'page-test',
  </script>
</dom-module>

Answer 1

弄清楚了。我的 css 引用了一个 ":root" 选择器，它现在在聚合物 2.0 中已被弃用。删除不推荐使用的选择器可以解决此问题。