<https://lh3.googleusercontent.com/-3VPTCDoJSfo/WTfBtJA_ChI/AAAAAAAAFyU/5eIclnfxBd0BVlySyDYAO4td995DXZQ2QCLcB/s1600/vra-name.png>

<https://lh3.googleusercontent.com/-LD2HdzJj8KU/WTfBxXxbgfI/AAAAAAAAFyY/RRSGKws2WfET7lI7OSpi04rkiZmWZd2_QCLcB/s1600/vra-name-ff.png>

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







Follow Polymer on Google+: plus.google.com/107187849809354688692
--- 
You received this message because you are subscribed to the Google Groups 
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To view this discussion on the web visit 
https://groups.google.com/d/msgid/polymer-dev/ea0541da-0fe3-45b5-a988-748091f83e38%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to