I want to know how to modify Polymer 1.0 tags after creation via jQuery or virtual DOM.
I am trying Polymer 1.0 with Mithril.js. Polymer 0.5.5 has Shadow DOM and its tag literal and internal structure (on Chrome's inspector) are almost same. But 1.0 uses shady DOM and it works as HTML template.
Source:
<paper-element>hello world</paper-element>
Polymer 0.5.5 result on inspector:
<paper-button role="button" tabindex="0">hello world</paper-button>
Polymer 1.0 result on inspector:
<paper-button role="button" tabindex="0" aria-disabled="false" class="x-scope paper-button-0">
<paper-ripple class="style-scope paper-button">
<div id="background" class="style-scope paper-ripple"></div>
<div id="waves" class="style-scope paper-ripple"></div>
</paper-ripple>
<paper-material animated="" class="content style-scope paper-button x-scope paper-material-0" elevation="0">
hello world
</paper-material>
</paper-button>
For example, performing jQuery command like this:
$("paper-element").text("new label");
It works with 0.5.5 (it shows correct label), but breaks 1.0 (internal tags have gone ant becomes just label). This new behavior is not good for manipulating Polymer's custom tags via other DOM manipulation library (at first, I hit this issue when I am playing Mithril.js). And I can't find any API to reinitialize internal tags.
Is there any good solution to modify Polymer 1.0 tag after creation to support virtual DOM or jQuery?
Update (6/3/2015)
I found solution from Polymer document. Polymer 1.0 can work on Mithril virtual DOM after adding the following snippet:
<script>
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
Polymer starts using Shadow DOM instead of default Shady DOM by this setting. It is as same as Polymer 0.5.5 and JavaScript DOM API friendly. Thank you guys!