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>
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