home.


Tagged: polymer-styles


PolymerJS: Binding properties to DOM attributes & styling

We saw previously that we could set a custom element’s property and have that value changed in the DOM.

In that case, we set a boolean and <span>{{warning}}</span> changed. That is, the DOM changed.

However, if we want to bind a variable to an attribute, <div warning="{{warning}}">hi</div>, then the DOM won’t automatically change when the property does, although the underlining javascript value will.

So we have to use the <div warning$="{{warning}}">hi</div> syntax instead to change the DOM attribute. If we combine this with some CSS selectors, we can use it to style the element.

div {
    background-color: pink;
}
div[warning] {
    background-color: red;
}

Notes:

  1. If you open up the DOM inspector, you can see the attribute change when the property does, in the example below.

Full source: an-ele.html

<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="an-ele">   
    <style>
        div {
            background-color: pink;
        }
        [warning] {
            background-color: red;
        }
    </style>
    <template>
        <div warning$="{{warning}}">hi</div>
    </template>
    <script>
        Polymer({
            is: "an-ele",
            properties: {
                warning: {
                   type: "Boolean"
                }
            }
        });
    </script>
</dom-module>

Full source: index.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="an-ele.html">
    </head>
    <body>    
        <template id="app" is="dom-bind">
            <an-ele warning="{{warning}}" on-tap="clicky">
            </an-ele>
        </template>
    </body>
    <script>
       window.addEventListener('WebComponentsReady', function(e) { 
            var t = document.querySelector('#app');
            t.clicky= function(e) {                
               var t = Polymer.dom(e).localTarget;
               t.warning = !t.warning;
            };
       }
    </script>
</html>
polymer polymer-styles polymer-properties

PolymerJS: Sharing CSS styles across elements

If you want to share styles – including Polymer’s shim for CSS variables and its :host selector, etc – across multiple custom elements you need an experimental feature called CSS imports.

After dom-module include the tag <link rel="import" type="css" href="common.css">.

In the common.css file have your normal styles. Then voila.

Notes:

  1. Polymer 1.1 has deprecated this method in favour of a new one.
  2. If you want to include such polymer happy styles in your main document, index.html etc, just use a normal import that you’d use to import a custom element, with the <style is="custom-style"> in such.

Full source an-ele.html:

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="an-ele">

    <link rel="import" type="css" href="common.css">    
    <template>  
        <span class="name">hi</span>
    </template> 
    <script>
        Polymer({
            is: "an-ele"
        }); 
    </script>

</dom-module>

Full source common.css:

:host {
    display: block;
    background-color: var(--an-ele-name-bgcolor, white);
}
:host.warning {
    background-color: var(--an-ele-name-bgcolor-warning, white);
}

Full source index.html:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="an-ele.html">            
    </head>
    <body>
        <an-ele class="warning">
        </an-ele>
    </body>
</html>
polymer polymer-styles

PolymerJS: Usage of element.updateStyles()

The shim used for CSS variables is lightweight.

This means you have to use element.updateStyles() in places where you’d like it to be automatic.

We’ve seen we need to use it if we dynamically update a CSS variable using element.customStyle.

Additionally, in a custom-style in index.html for example, if you have a style that changes a CSS variable based on a class selection:

an-ele {
    --an-ele-name-bgcolor: green;
}
an-ele.warning {
    --an-ele-name-bgcolor: warning;
}

Then, without updateStyles(), nothing will happen if add or remove the ‘warning’ class from ‘an-ele’. If you want to want to see the change you need to call element.updateStyles().

However, if instead you define two CSS variables in your custom element, and change the class at runtime, then it will work:

Within your custom element’s style tag:

:host {     
    background-color: var(--an-ele-name-bgcolor, white);
}
:host.warning { 
    background-color: var(--an-ele-name-bgcolor-warning, white);
}

Within your index.html `custom-styles style tag:

an-ele {
    --an-ele-name-bgcolor-warning: red;
    --an-ele-name-bgcolor: purple;
}

Then changing the ‘warning’ class at runtime will work without a call to updateStyles(), since the css variables shim no longer needs to change a CSS variable at runtime.

polymer polymer-styles

PolymerJS: Dynamically changing a CSS style

Previously, we learnt how to use the shimmed CSS variables to style a custom element.

We may want to change that dynamically. And we can by using the customStyle property on the custom element.

Say we have a click listener on our element, and we want to change its '--an-ele-name-bgcolor' CSS variable.

We can get access to such property from the element (likely using event retargeting) and change the style like so.

t.clicked = function(e) {
   var tar = Polymer.dom(e).localTarget;
   tar.customStyle['--an-ele-name-bgcolor'] = 'pink';
   tar.updateStyles();
};

For performance reasons, we have to call updateStyles on our component ourself.

Notes:

  1. We can also dynamically alter the varibles in a CSS mixin, but only with obliterating any CSS you don’t respecify from what I can tell at the moment.

Full source: index.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="an-ele.html">
        <style is="custom-style">
                --an-ele-name-bgcolor: purple;
            }
        </style>
    </head>
    <body>    
        <template id="app" is="dom-bind">
            <an-ele on-tap="clicked">
            </an-ele>
        </template>
    </body>
    <script>
       window.addEventListener('WebComponentsReady', function(e) { 
            var t = document.querySelector('#app');
            t.clicked= function(e) {
               var t = Polymer.dom(e).localTarget;
                t.customStyle['--an-ele-name-bgcolor'] = 'pink';
                t.updateStyles();
            };
       });
    </script>
</html>

Full source: an-ele.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="an-ele">

    <style>
        .name {
            background-color: var(--an-ele-name-bgcolor, green);
        }
    </style>
    <template>
        <span class="name">hi</span>
    </template>
    <script>
        Polymer({
            is: "an-ele"
        });
    </script>

</dom-module>
polymer polymer-styles

PolymerJS: Allow custom elements to be styled: many rules with mixins

Previously, we showed how one CSS property in your custom element could be styled from the outside using a shim for CSS variables.

But we often want to allow the user to style not just one rule for a class, not even many, but anything for that class.

Polymer 1.0 uses an experimental feature called mixins that allows the element user to specify any CSS property for a class.

We @apply(--an-ele-name-theme) in CSS selector for the class in the custom element:

<dom-module id="an-ele"><style>
        .name {
            @apply(--an-ele-name-theme);
        }
    </style>
...

Then in the index.html, or hosting custom element, we specify the --an-ele-name-theme under the selector for our element, and add the styles there.

<style is="custom-style">
    an-ele {
        --an-ele-name-theme: {
            display: block;
            color: white;
            font-weight: bold;
            background-color: blue;
        };
    }
</style>

Notes:

  1. is="custom-style" is only needed if your styling the element from index.html not a polymer element.

Full source: an-ele.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="an-ele">

    <style>
        .name {
            @apply(--an-ele-name-theme);
        }
    </style>
    <template>  
        <span class="name">hi</span>
    </template>
    <script>
        Polymer({
            is: "an-ele"
        });
    </script>   

</dom-module> 

Full source: index.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <link rel="import" href="an-ele.html">            
        <style is="custom-style">
            an-ele {
                --an-ele-name-theme: {
                    display: block;
                    color: white;
                    font-weight: bold;
                    background-color: blue;
                };
            }
        </style>
    </head>
    <body>
        <an-ele>
        </an-ele>
    </body>
</html>
polymer polymer-styles

Page 1 of 2
Next