Function registerComponent

src/ext/component.js:126–267

(templateEl, componentScript)

    }

    function registerComponent(templateEl, componentScript) {
        const tagName = templateEl.getAttribute('component');
        if (!tagName.includes('-')) {
            console.error("component name must contain a dash: '" + tagName + "'");
            return;
        }

        // Extract <style> blocks from the raw text, wrap in @scope (tag-name),
        // and inject a single combined <style> into document.head. Using head
        // rather than insertAdjacentElement keeps bundle-loaded templates
        // (whose templateEl lives in a DOMParser'd foreign document) working.
        var raw = templateEl.textContent;
        var combined = '';
        var styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
        var match;
        while ((match = styleRegex.exec(raw)) !== null) {
            combined += match[1] + '\n';
        }
        if (combined) {
            raw = raw.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
            templateEl.textContent = raw;
            var scopedStyle = document.createElement('style');
            scopedStyle.setAttribute('data-hyperscript-component', tagName);
            scopedStyle.textContent = '@scope (' + tagName + ') {\n' + combined + '}';
            document.head.appendChild(scopedStyle);
        }

        const templateSource = templateEl.textContent;

        // Parse template once to validate - actual rendering happens per instance
        // (We reuse the render command's approach: tokenize in "lines" mode at render time)

        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;