diff --git a/lib/mixins/property-effects.js b/lib/mixins/property-effects.js index 71e16d7bf7..2e2cddb150 100644 --- a/lib/mixins/property-effects.js +++ b/lib/mixins/property-effects.js @@ -2845,6 +2845,7 @@ export const PropertyEffects = dedupingMixin(superClass => { // are run at this point during the initial element boot-up. if (this.__dataClientsReady) { this._runEffectsForTemplate(templateInfo, this.__data, null, false); + this._flushClients(); } return dom; } diff --git a/test/unit/property-effects-template.html b/test/unit/property-effects-template.html index f7e39d87c2..395a5060ad 100644 --- a/test/unit/property-effects-template.html +++ b/test/unit/property-effects-template.html @@ -55,6 +55,7 @@ } ready() { super.ready(); + this.readied = true; window.lifecycleOrder.log(this, 'ready'); } } @@ -154,6 +155,9 @@ this.shadowRoot.appendChild(dom); return dom; } + stampNoAppend() { + return this._stampTemplate(this.$.templateFromShadowDom); + } } customElements.define('x-runtime', XRuntime); @@ -304,6 +308,7 @@ }, idFor(el) { let host = el.getRootNode().host; + host = host && host.localName !== 'x-runtime' ? host : null; let id = el.getAttribute('log') || el.id; return (host ? this.idFor(host) + '|' : '') + el.localName + (id ? '#' + id : ''); } @@ -356,9 +361,9 @@ assert.equal(stamped[0], el.$.first); // Lifecycle order correct assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime' ]); }); @@ -372,13 +377,13 @@ assert.equal(stamped[0], el.$.first); assert.equal(stamped[1], dom.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow' + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow' ]); }); @@ -419,19 +424,19 @@ assert.equal(stamped[1], dom2.$.first); assert.equal(stamped[2], dom3.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow' + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow', + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow', + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow' ]); // Unstamp el._removeBoundDom(dom2); @@ -456,9 +461,9 @@ assert.equal(stamped[0], el.$.first); assert.equal(stamped[1], dom.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', 'x-element#shadow|x-element-child#noBinding', 'x-element#shadow|x-element-child#hasBinding', @@ -503,19 +508,19 @@ assert.equal(stamped[1], dom2.$.first); assert.equal(stamped[2], dom3.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', 'x-element#shadow|x-element-child#noBinding', 'x-element#shadow|x-element-child#hasBinding', 'x-element#shadow', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow', - 'x-runtime|x-element#shadow|x-element-child#noBinding', - 'x-runtime|x-element#shadow|x-element-child#hasBinding', - 'x-runtime|x-element#shadow' + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow', + 'x-element#shadow|x-element-child#noBinding', + 'x-element#shadow|x-element-child#hasBinding', + 'x-element#shadow' ]); // Unstamp el._removeBoundDom(dom2); @@ -540,13 +545,13 @@ assert.equal(stamped[0], el.$.first); assert.equal(stamped[1], dom.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', - 'x-runtime|x-element#light|x-element-child#noBinding', - 'x-runtime|x-element#light|x-element-child#hasBinding', - 'x-runtime|x-element#light' + 'x-element#light|x-element-child#noBinding', + 'x-element#light|x-element-child#hasBinding', + 'x-element#light' ]); }); @@ -584,19 +589,19 @@ assert.equal(stamped[1], dom2.$.first); assert.equal(stamped[2], dom3.$.first); assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime', - 'x-runtime|x-element#light|x-element-child#noBinding', - 'x-runtime|x-element#light|x-element-child#hasBinding', - 'x-runtime|x-element#light', - 'x-runtime|x-element#light|x-element-child#noBinding', - 'x-runtime|x-element#light|x-element-child#hasBinding', - 'x-runtime|x-element#light', - 'x-runtime|x-element#light|x-element-child#noBinding', - 'x-runtime|x-element#light|x-element-child#hasBinding', - 'x-runtime|x-element#light' + 'x-element#light|x-element-child#noBinding', + 'x-element#light|x-element-child#hasBinding', + 'x-element#light', + 'x-element#light|x-element-child#noBinding', + 'x-element#light|x-element-child#hasBinding', + 'x-element#light', + 'x-element#light|x-element-child#noBinding', + 'x-element#light|x-element-child#hasBinding', + 'x-element#light' ]); // Unstamp el._removeBoundDom(dom2); @@ -688,13 +693,18 @@ assert.equal(stamped[0], el.$.first); // Lifecycle order correct assert.deepEqual(window.lifecycleOrder.ready, [ - 'x-runtime|x-element#proto|x-element-child#noBinding', - 'x-runtime|x-element#proto|x-element-child#hasBinding', - 'x-runtime|x-element#proto', + 'x-element#proto|x-element-child#noBinding', + 'x-element#proto|x-element-child#hasBinding', + 'x-element#proto', 'x-runtime' ]); }); + test('runtime stamped templates ready before append', () => { + const dom = el.stampNoAppend(); + assert.isTrue(dom.querySelector('x-element').readied); + }); + }); suite('template parsing hooks', () => {