CODEWITHSUNDEEP
csspolymer-2.0
user3757849
user3757849

Reputation: 239

Polymer 2.0 style module share styles prints css source on web page

I'm using a style module with polymer 2.0 (https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules).

The styles are working. However in Chrome the css content prints out onto the web page looking like gibberish. Works perfectly in Firefox. How can I fix this in Chrome? Thanks in advance.

Here is what I have:

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>

Upvotes: 0

Views: 81

Answers (1)

user3757849
user3757849

Reputation: 239

Figured it out. My css referenced a ":root" selector which is now deprecated in polymer 2.0. Removing the deprecated selector resolves the issue.

Upvotes: 0

Related Questions