A blog dedicated to Salesforce Ohana

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.
Share:

No comments:

Post a Comment

Follow Me

Enter your email address:

Delivered by FeedBurner

Popular Posts

Labels

Salesforce (95) Apex (42) admin (27) ADM (20) visualforce (20) dev 501 (19) integration (18) learn salesforce (17) 501 (16) SOAP (13) tutorial (11) Certification. (9) Trigger (7) lightning (7) test class (7) unit testing (7) design pattern (6) report (6) trailhead (6) Advanced Admin (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) formula (5) javascript (5) mobile (5) salesforce release (5) security (5) service cloud (5) solution management (5) use case (5) JSON (4) Lightning Experience (4) WebSphere (4) best practice (4) cast iron (4) developer (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) Live Chat (3) Performance (3) Products (3) Sales Cloud (3) Summer15 (3) Tips (3) component (3) deployment (3) dynamic apex (3) event (3) license (3) map (3) mapbox (3) singleton (3) version controlling (3) Advanced Apex (2) Bulkify (2) Distributed Version Controlling (2) Eclipse (2) Force.com IDE (2) Governor Limit (2) IBM (2) Lightning Design System (2) Live Agent (2) Price Book (2) REST (2) SOSL (2) Spring 15 (2) Study Notes. (2) Summer17 (2) ant (2) automation tool (2) basic (2) chatter (2) coding (2) communication (2) console (2) controller (2) documentation (2) flow (2) git (2) jquery (2) logging (2) permission (2) process builder (2) release (2) salesforce1 (2) strategy (2) xml (2) Agent Productivity (1) Asynchronous callout (1) Browser (1) Bulk data load (1) Calendar (1) Canon (1) Case Management (1) Classic (1) Contact Center (1) Continuation (1) Continuous Integration (1) Cookie (1) Custom Metadata (1) Custom Object (1) Decorator Design Pattern (1) Diwali (1) Email (1) Groups (1) Guide (1) Ideas (1) Improvement (1) KPIs (1) LastModifiedDate (1) Metadata (1) Metrics (1) Omni-Channel (1) Opportunity (1) Photo (1) Platform Developer I (1) Product Schedule (1) Profile (1) Public Site (1) Query Plan (1) QuickReference (1) Reports (1) Role (1) Salesforce Optimizer (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Summer14 (1) Summer16 (1) SystemModStamp (1) Users (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) configuration (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) dreamforce (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) object (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Blog Archive

My Trailhead

Total Subscribers

Total Pageviews