home.


Tagged: polymer-properties


PolymerJS: Communicating between elements

We’ve learnt how to set custom properties on custom elements.

But we may want to communicate data between the host element and the custom element. We can use a property on the custom element for this.

In the host document, index.html in this case, we’ll have a script tag that sets a property on a ‘dom-bind’ template called ‘warning’.

window.addEventListener('WebComponentsReady', function(e) { 
    var t = document.querySelector('#app');
    t.warning = true;
});

Now in our template code in index.html we’ll reference the {{warning}} property and also pass it to our custom element.

<template id="app" is="dom-bind"><div>{{warning}}</div>
  <an-ele warning="{{warning}}" on-tap="clicky"></an-ele>
  ...
</template>

Now in our custom element, set an on-tap event listener and change the value of ‘warning’ in that.

...
<template><div on-tap="clicky">hi</div>
</template><script>
    Polymer({
        is: "an-ele",
        properties: {
            warning: {
               type: "Boolean",
               notify: true
            }
        },
        clicky: function() {
            this.warning = !this.warning;
        }
    });
</script>
...

Note the notify property that’s been added to the ‘warning’ property. This makes sure any changes to ‘warning’ in the element bubble up to the hosts, our template in index.html for example.

Now when we tap on the div in our custom element, the value in index.html will automatically update.

Note:

  1. Although we’re only communicating between index.html and the element, it’s trivial to communicate between two elements – in this case you’d just bind the ‘warning’ property to another custom element.

Full source: an-ele.html

<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="an-ele">
    <template>
        <div on-tap="clicky">hi</div>
    </template>
    <script>
        Polymer({
            is: "an-ele",
            properties: {
                warning: {
                   type: "Boolean",
                   notify: true
                }
            },  
            clicky: function() {
                this.warning = !this.warning;
            }
        });
    </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">
            <div>{{warning}}</div>
            <an-ele  warning="{{warning}}"> </an-ele>
        </template>
    </body>
    <script>
       window.addEventListener('WebComponentsReady', function(e) { 
            var t = document.querySelector('#app');
            t.warning = true;
       });
    </script>
</html>
polymer polymer-communication polymer-properties

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: Custom element properties

Previously, we set javascript properties to be bound a template that extends dom-bind.

We now want to do the same to a custom element. So we need to specify the properties in the initialisation code.

Polymer({
    is: "an-ele",
    properties: {
        warning: {
           type: "Boolean"
        }
    },
});

This specifies there’ll be a property on the element. There are other properties to set for the ‘warning’ property, but we’ll leave them for now.

In our template for the element, we can now reference the property.

<template>
  <span>{{warning}}</span>
</template>

Now, outside the element, if we change the property, i.e. document.querySelector('an-ele').warning = false, it will show change the displayed true or false in the template.

Full source: an-ele.html

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

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

    <template>
        <span>{{warning}}</span>
    </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="an-ele.html">
    </head>
    <body>
        <template id="app" is="dom-bind">
            <an-ele warning="false" 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;
                if(t.warning) {
                    t.warning = false;
                } else {
                    t.warning = true;
                }
            };
       });
    </script>
</html>
polymer polymer-properties

Page 1 of 1