Method connectedCallback

src/ext/component.js:159–199

()

        const ComponentClass = class extends HTMLElement {
            connectedCallback() {
                // Skip if already initialized
                if (this._hypercomp_initialized) return;
                this._hypercomp_initialized = true;

                // Isolate component scope - ^var resolution stops here
                this.setAttribute('dom-scope', 'isolated');

                // Capture slot content and clear children immediately,
                // before processNode can recurse into them
                this._slotContent = this.innerHTML;
                this.innerHTML = '';

                // 1. Inject `attrs` proxy into element scope, then apply component-level hyperscript
                var internalData = runtime.getInternalData(this);
                if (!internalData.elementScope) internalData.elementScope = {};
                internalData.elementScope.attrs = createAttrs(this);

                if (componentScript) {
                    this.setAttribute('_', componentScript);
                    _hyperscript.process(this);
                }

                // 2. Render template after synchronous init completes
                const self = this;
                var source = substituteSlots(templateSource, self._slotContent, tagName);

                queueMicrotask(function() {
                    // Initial render - may return a promise if template has async expressions
                    var result = self._renderTemplate(source);
                    if (result && result.then) {
                        result.then(function(html) {
                            self._stampTemplate(html);
                            self._setupReactiveEffect(source);
                        });
                    } else {
                        self._stampTemplate(result);
                        self._setupReactiveEffect(source);
                    }
                });
            }

            disconnectedCallback() {
                reactivity.stopElementEffects(this);