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>