Class RendererComponent

source/WebCell.tsx:54–170

        { addInitializer }: ClassDecoratorContext<ClassComponent>
    ) => {
        class RendererComponent
            extends (Class as ClassComponent)
            implements WebCell
        {
            declare props: WebCellProps;

            internals = this.tagName.includes('-')
                ? this.attachInternals()
                : undefined;
            renderer = new DOMRenderer();

            get root(): ParentNode {
                return this.shadowRoot || this.internals.shadowRoot || this;
            }
            mounted = false;
            declare mountedCallback?: () => any;

            constructor() {
                super();

                if (meta.mode && !this.internals?.shadowRoot)
                    this.attachShadow(meta as ShadowRootInit);
            }

            async connectedCallback() {
                const { mode } = meta;
                const renderChildren = !(mode != null);

                const { root } = this,
                    events = eventMap.get(this) || [];

                for (const { type, selector, handler } of events) {
                    if (renderChildren && /^:host/.test(selector))
                        console.warn(
                            `[WebCell] DOM Event delegation of "${selector}" won't work if you don't invoke "this.attachShadow()" manually.`
                        );
                    root.addEventListener(type, handler);
                }

                super['connectedCallback']?.();

                if (this.mounted) return;

                await this.update();

                this.mounted = true;
                this.mountedCallback?.();
            }

            declare render?: () => VNode;
            declare updatedCallback?: () => any;

            protected updateDOM(content: VNode) {
                const result = this.renderer.render(
                    content,
                    this.root,
                    meta.renderMode as 'async'
                );