Polymer iron-form not working

Question

I have the following markup in my html:

<form is="iron-form" login-form>
    <paper-input label="Email" type="email" name="email"></paper-input>
    <paper-input label="Password" type="password" name="password"></paper-input>
    <paper-button class="self-end btn-primary" raised login-btn>Login</paper-button>
</form>

In chrome, the form is never upgraded to an iron-form, but it works fine in firefox. However, I can use: document.createElement('form', 'iron-form'); to create an iron-form that is properly upgraded. This is driving me crazy. Any ideas? Thanks

Answer 1

I'm not sure why the iron-input should work any differently. Are you sure the iron-input is working perfectly as a Polymer element when you create it in the template? (For example, does it have the utility functions like debounce ?) I ask because it looks like a standard input.

Looking at the Meteor code, it doesn't look like any type-extension elements should work. As far as I can tell, it looks like all tag creation goes through here:

https://github.com/meteor/meteor/blob/832e6fe44f3635cae060415d6150c0105f2bf0f6/packages/blaze/materializer.js#L99

To handle type-extension custom elements, I think this needs another branch that does something like:

} else if (tag.attrs && ('is' in tag.attrs)) {
  // type-extension custom element
  elem = document.createElement(tagName, tag.attrs[is]);     
} else {
  // normal elements
  elem = document.createElement(tagName);
}

The two-arg createElement will only work if you have native custom element support or you have the polyfill installed, so Meteor might want to handle this another way.