my polymer element:
<ele-label id="newLabel" color="#000000" bgColor="#f1f1f1" eleHeight="30" eleWidth="50" text="Name:" eleDisplay="inline-block" elefloat="left"></ele-label>
but when I clone this element inner html will removed.
can any one help me ?
<polymer-element name="ele-label" attributes="text color eleid eleWidth eleHeight fontSize bgColor paddingTop paddingBottom paddingLeft paddingRight eleDisplay elefloat" > <template> <div><label style="font-size:{{fontSize}}pt; color:{{color}} ;">{{text}}</label></div> </template></polymer-element>
Template polymerization is defined as a process of polymer synthesis in which the monomer units are organized by a preformed macromolecule (template) and refers to one phase systems in which the monomer and template are soluble in the same solvent.
Conditional templates introduce some overhead, so they shouldn't be used for small UI elements that could be easily shown and hidden using CSS. Instead, use conditional templates to improve loading time or reduce your page's memory footprint.
Element <dom-if> (DomIf) Custom element that conditionally stamps and hides or removes template content based on a boolean flag.
finally got solution
polylabel1 : id of my div in side template of polymer element.
Polymer('ele-label', {
ready: function()
{
this.innerHTML=this.$.polylabel1.outerHTML;
}
attributeChanged: function()
{
this.innerHTML=this.$.polylabel1.outerHTML;
}
}
When using the <template>
tag in Polymer, it creates a shadow DOM, which is not part of the main DOM. You won't see the elements in the DOM itself, because it's not there. Take a look at the article i linked to learn more.
EDIT: It sounds like jQuery is not cloning the element's shadow with it. Try using .clone(true)
to also clone related data.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With