CODEWITHSUNDEEP
javascripthtmlcsspolymer
Arijit Goswami
Arijit Goswami

Reputation: 21

CSS changes don't reflect in Polymer

I have created a polymer element in the file hello-world.html

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="hello-world">

    <template>
        <style>
            h1 
            {
                color: green;
                font-family: Arial;
                text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
            }
        </style>
        <h1>Hello World</h1>
    </template>

    <script>
        Polymer ({ 
            is: "hello-world", 
        }); 
    </script>

</dom-module>

The file that accesses hello-world.html is named index.html

<!DOCTYPE html>

<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

        <link rel="import" href="elements/hello-world.html">

        <style>
            h1
            {
                color: red;
            }
        </style>
    </head>

    <body>
        <hello-world></hello-world>
        <h1>Hello Arijit</h1>
    </body>
</html>

However, when I change the CSS properties in hello-world.html and I refresh index.html in localhost, the changes don't reflect. Is there anything I am missing out?

Upvotes: 1

Views: 73

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658205

Polymer elements use style encapsulation to prevent styles from bleeding in and out of elements. With full shadow DOM enabled this is a browser feature, in the shady DOM (default) this is a Polymer feature.

For more details see https://www.polymer-project.org/1.0/docs/devguide/styling.html

This should do what you want:

<dom-module id="hello-world">

    <template>
        <style>
            h1 
            {
                color: var(--hello-world-color, green);
                font-family: Arial;
                text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
            }
        </style>
        <h1>Hello World</h1>
    </template>

    <script>
        Polymer ({ 
            is: "hello-world", 
        }); 
    </script>

</dom-module>

<!DOCTYPE html>

<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

        <link rel="import" href="elements/hello-world.html">

        <style is="custom-style">
            :root
            {
                --hello-world-color: red;
            }
        </style>
    </head>

    <body>
        <hello-world></hello-world>
        <h1>Hello Arijit</h1>
    </body>
</html>

Upvotes: 3

Related Questions