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

Question

我正在使用带有 polymer 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>

页面测试.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 引用了一个现在在 polymer 2.0 中弃用的“:root”选择器。删除已弃用的选择器可解决此问题。