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 (
|
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?
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_formin the<iron-form>element.At the moment I have this:
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
Would you accept a PR with the addition of the newly emitted event?
Or, what would you advise?