Simple Polymer 2 element behaving differently in Chrome and Firefox

32 views
Skip to first unread message

Joern Turner

unread,
Jun 7, 2017, 5:09:13 AM6/7/17
to Polymer

Hi,

i've searched the well-known sources but no luck. Therefore my question here:

I got a simple Polymer 2 element (ES& syntax) which behaves differently in Firefox (53.0.3 on OSX 10.12.5) and Chrome 58.0.3029.110.

Here's the element


dom-module id="vra-name">
   
<template>
       
<style>
           
:host {
               
display: inline-block;
               
border: 1px solid #efefef;
               
padding: 4px;
               
vertical-align: top;

               
--paper-input-container-underline: {
                   
border: none;
               
};
           
}

           
.leaf {
               
background: lightgrey;
           
}

           
:host:before {
               
content: 'vra-name';
               
background: orange;
               
padding: 2px;
               
border-radius: 4px;
               
font-style: italic;
           
}
       
</style>

       
<paper-input class="textnode" id="text" label="name" value="{{value}}" title="name" no-label-float>
           
<slot id="slot" name="name"></slot>
       
</paper-input>


       
<paper-input label="type" value="{{type}}" title="type" no-label-float></paper-input>

   
</template>

   
<script>
       
class VraName extends Polymer.Element {
            static
get is() {
               
return 'vra-name';
            }

            static
get properties() {
               
return {

                   
value: {
                       
type: String,
                       
observer: '_valueChanged',
                       
reflectToAttribute: false
                    },
                   
type: {
                       
type: String,
                       
reflectToAttribute: true
                    },
                }
            }

           
constructor() {
               
super();
               
console.log("VraName constructor...")
            }

           
connectedCallback() {
               
super.connectedCallback();
               
console.log("VraName connected")
               
this.value = this.innerHTML;
            }

           
_valueChanged(val) {
               
console.log("newVal: ", val);
               
this.value = val;
               
this.innerHTML = val;
            }

        }
       
customElements.define(VraName.is, VraName);
   
</script>
</dom-module>

The result of the rendering on Chrome is seen in the first picture and this is the expected result. The second screenshot shows the rendering in FF.

This is the usage:

<body>
   
<h1>VRA:NAME</h1>

   
<h2>with values</h2>
   
<vra-name vocab="local" type="personal" refid="uuid-2d9170ef-2e41-537c-8a78-28b7be563ae7">Paul, Priya</vra-name>

   
<h2>without values</h2>
   
<vra-name vocab="local" type="" refid="uuid-2d9170ef-2e41-537c-8a78-28b7be563ae7"></vra-name>
</body>



Especially notice the missing values in the first occurrence of the element. Why are these not initialized as in Chrome? Any help is highly appreciated. My project lives or dies on this.

Thanks Joern







Reply all
Reply to author
Forward
0 new messages