Thursday, January 29, 2015

Google Polymer - Override Style

Here in this post, we will understand how we can override the default style in Google Polymer.

Step 1 -
Create the web component Hello-World-Override-Style.html as shown below -
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="Hello-World-Override-Style" noscript>
    <style type="text/css">
        p {
            color: red;
        }
    </style>
    <template>
        <style type="text/css">
            p {
                font-family: Verdana;
                color: blue;
            }
        </style>
        <p>Hello Sudipta Deb</p>
    </template>
</polymer-element>
As you can see we have two styles defined. Style 1 (Outside template tag) is just making the color of the font red and Style 2 (inside template tag) is making the font color as blue as well as set the font to Verdana.

Source Code @ https://github.com/suddeb/Learning-Polymer/blob/master/elements/Hello-World-Override-Style.html
Step 2 -
Create the html page to refer the web component. Name of the html page is: testHello-World-Override-Style.html.
<!DOCTYPE html>
<html>
<head>
    <title>Hello World Test with Google Polymer</title>
    <!-- Load the platform support library -->
    <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <!-- Load the component -->
    <link rel="import" href="elements/Hello-World-Override-Style.html">
</head>
<body>
    <!-- Declare the element by tag -->
    <Hello-World-Override-Style></Hello-World-Override-Style>
    <p>Hello Pradipta Deb</p>
</body>
</html>

Source Code @ https://github.com/suddeb/Learning-Polymer/blob/master/testHello-World-Override-Style.html

Step 3 -
Let's check the output -

Now as you can see that Style 2 is applied to the text inside the template of the web component. But Style 1 is applied to rest all <p> tags.

So this post demonstrated how to override the default style in Google Polymer. Any feedback, please let me know. Thanks.

0 comments:

Post a Comment