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 type="text/css">
p {
font-family: Verdana;
color: blue;
<p>Hello Sudipta Deb</p>

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 @
Step 2
Create the html page to refer the web component. Name of the html page is: testHello-World-Override-Style.html.

<!DOCTYPE html>
<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">
<!-- Declare the element by tag -->
<p>Hello Pradipta Deb</p>

Source Code @

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.