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.htmlStep 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.htmlStep 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....
Read More
