diff --git a/core/CustomElement.js b/core/CustomElement.js index 45174c8f..6b33ec0a 100644 --- a/core/CustomElement.js +++ b/core/CustomElement.js @@ -374,7 +374,7 @@ export default class CustomElement extends ICustomElement { if (customCallbacks.length) { this.onPropChanged(customCallbacks); if (fireChangeOnCreate) { - this._onConstructedCallbacks.push(function onCreateChangeEmitter() { + this._addCallback('_onConstructedCallbacks', function onCreateChangeEmitter() { const value = this[name]; if (customSimpleCallback) { customSimpleCallback.call(this, undefined, value, null); @@ -906,14 +906,12 @@ export default class CustomElement extends ICustomElement { for (const callbacks of this.static._onConnectedCallbacks) { callbacks.call(this, this.callbackArguments); } - this.dispatchEvent(new Event('mdw:connected')); } disconnectedCallback() { for (const callbacks of this.static._onDisconnectedCallbacks) { callbacks.call(this, this.callbackArguments); } - this.dispatchEvent(new Event('mdw:disconnected')); } } diff --git a/core/customTypes.js b/core/customTypes.js index 22b0056c..b7200fb2 100644 --- a/core/customTypes.js +++ b/core/customTypes.js @@ -117,6 +117,18 @@ function elementStylerMicrotaskCallback(name) { } } +const pendingResizeCallbacks = new WeakMap(); +const pendingConnections = new ResizeObserver((entries) => { + for(const {target} of entries) { + if (pendingResizeCallbacks.has(target)) { + const callback = pendingResizeCallbacks.get(target); + pendingResizeCallbacks.delete(target); + pendingConnections.unobserve(target); + callback(); + } + } +}); + /** @type {import('./typings.js').ObserverOptions<'object',ElementStylerOptions, CustomElement>} */ export const ELEMENT_STYLER_TYPE = { type: 'object', @@ -138,7 +150,8 @@ export const ELEMENT_STYLER_TYPE = { if (this.isConnected) { queueMicrotask(callback); } else { - this.addEventListener('mdw:connected', callback, { once: true }); + pendingResizeCallbacks.set(this, callback); + pendingConnections.observe(this); } }, fireChangeOnCreate: true,