CODEWITHSUNDEEP
javascriptpolymer
David Given
David Given

Reputation: 13701

Problems changing 'is' dynamically in Polymer

I'm trying to add a Polymer UI to an existing HTML page which contains a form. I don't have control over the content of the page, only the header and footer, so I can't change the form to use Polymer elements rather than <input>. So instead I'm trying to rewrite the form using Javascript.

I'm finding that adding an is attribute to an existing element has no effect --- the element doesn't get upgtaded.

I presume that this is all happening at a point after which Polymer has scanned the DOM looking for is attributes, so it's not noticing my change. (Although creating a new element with an is attribute and adding it also doesn't work, which is kind of weird, because adding a Polymer custom element does work.)

Is there any way around this; such as telling Polymer when I add the new element so that it can be upgraded properly?

Upvotes: 1

Views: 81

Answers (1)

ebidel
ebidel

Reputation: 24109

To use is=, you must be extending a native element. These are called type extension custom elements (http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#usetypeextension).

In general, I don't believe adding the is= attribute at a later time has any effect on upgrading the element. The element needs to be declared up front with is= (e.g. <input is="core-input">) or instantiated dynamically using the special version of createElement:

var input = document.createElement('input', 'core-input');

In the declared case, this is the parsers signal to alter the prototype of the element when it's seen. In the JS case, that's done at creation time. If you just use el.setAttribute('is', 'core-input'), the element's prototype is already created by that point so it has no effect.

Upvotes: 2

Related Questions