Polymer custom element attributes as boolean typed values

polymer

Solution

You can give Polymer hints as to what type of input an attribute is. See the following example where I added the Polymer script and specifically the `this.happyFlag = false` in the created method. This line gives Polymer a hint that this value should be treated as a boolean. See Polymer's Documentation about hinting types.

<polymer-element name="x-smiley" attributes="name, happyFlag">
<template>
    {{name}} is {{happyFlag}}
    <span hidden?="{{happyFlag}}">:-)</span>
    <span hidden?="{{happyFlag}}">:-(</span>
    <hr>
</template>
<script>
  Polymer('x-smiley', {
    created: function() {
        this.happyFlag = false;
    },
    ready: function() {
    }
  })
</script>

Problem

While `Demo A` works, I would like to understand if it is possible to make it work like `Demo B`. Basically, to for the custom element to resolve `happyFlag` attribute as boolean type. ``` // Demo A - works. bob smiles. cat frowns. <x-smiley name="Bob" happyFlag="true"></x-smiley> <x-smiley name="Cat" happyFlag="false"></x-smiley> <polymer-element name="x-smiley" attributes="name, happyFlag" noscript> <template> {{name}} is <span hidden?="{{happyFlag == 'true'}}">:-)</span> <span hidden?="{{happyFlag == 'false'}}">:-(</span> <hr> </template> </polymer-element> // Demo B - does not work (span always hidden) <x-smiley name="Bob" happyFlag="true"></x-smiley> <x-smiley name="Cat" happyFlag="false"></x-smiley> <polymer-element name="x-smiley" attributes="name, happyFlag" noscript> <template> {{name}} is <span hidden?="{{happyFlag}}">:-)</span> <span hidden?="{{happyFlag}}">:-(</span> <hr> </template> </polymer-element> ```

Original source