Skip to content
This repository was archived by the owner on Dec 19, 2024. It is now read-only.
This repository was archived by the owner on Dec 19, 2024. It is now read-only.

Writing a decorator for <iron-form>: a timing question #259

Description

I am writing a Polymer 2 element that decorated <iron-form>
My element needs to work with <iron-form> and the form itself that is decorated by <iron-form> -- which is stored as _form in the <iron-form> element.

At the moment I have this:

ready () {
  super.ready()
  var self = this

  this.ironForm = this.allChildrenNamed('IRON-FORM', true)
  if (!this.ironForm) throw new Error('hot-form must contain an iron-form element which will be decorated')

  setTimeout(function () {
    self.form = self.ironForm._form
  }, 0)
}

Is this a reliable way to go about this?
WIth that setTimeout, <iron-form> has enough time to assign _form. Will this be the case longer-term?
@TimvdLippe commeted here: Polymer/polymer#5149

There might be a case where iron-form is not attached yet, as the assignment to _form is in that callback (

iron-form/iron-form.html

Lines 172 to 204 in dc9c963

attached: function() {
// We might have been detached then re-attached.
// Avoid searching again for the <form> if we already found it.
if (this._form) {
return;
}
// Search for the `<form>`, if we don't find it, observe for
// mutations.
this._form = Polymer.dom(this).querySelector('form');
if (this._form) {
this._init();
// Since some elements might not be upgraded yet at this time,
// we won't be able to look into their shadowRoots for submittables.
// We wait a tick and check again for any missing submittable default
// values.
this.async(this._saveInitialValues.bind(this));
} else {
this._nodeObserver = Polymer.dom(this).observeNodes(
function(mutations) {
for (var i = 0; i < mutations.addedNodes.length; i++) {
if (mutations.addedNodes[i].tagName === 'FORM') {
this._form = mutations.addedNodes[i];
// At this point in time, all custom elements are expected
// to be upgraded, hence we'll be able to traverse their
// shadowRoots.
this._init();
Polymer.dom(this).unobserveNodes(this._nodeObserver);
this._nodeObserver = null;
}
}
}.bind(this));
}
},
) I do not think setTimeout is 100% reliable, but it will probably work in most cases.

Since this is mostly an iron-form specific question, I would advise to open an issue there and potentially request a new event to be notified when _form is set, in the attached callback.

Would you accept a PR with the addition of the newly emitted event?
Or, what would you advise?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions