如何在constructor之后、connectedCallback之前渲染Web组件？

核心思路 #

要在元素插入DOM前完成渲染，同时保证能获取到正确的属性和子元素，需要结合属性监听、子元素变化监听和渲染状态标记，确保所有依赖项就绪后自动触发渲染，同时通过初始隐藏元素避免FOUC。

具体实现方案 #

1. 监听关键属性变化：通过attributeChangedCallback监听type和href属性，属性更新时触发渲染检查。
2. 监听子元素变化：用MutationObserver监听组件内部的子元素添加/移除，确保子元素就绪后渲染。
3. 控制渲染时机：设置一个isRendered标记避免重复渲染，每次属性或子元素变化时，检查是否已具备渲染条件（属性存在、子元素就绪），若元素尚未插入DOM则直接执行渲染。
4. 避免FOUC：初始将组件设为display: none，渲染完成后再显示。

修改后的组件代码 #

class MYButton extends HTMLElement {
    static get observedAttributes() {
        // 声明需要监听的属性
        return ['type', 'href'];
    }

    constructor() {
        super();
        this.isRendered = false;
        this.elmButton = null;
        // 初始隐藏组件，避免FOUC
        this.style.display = 'none';
        
        // 监听子元素变化
        this.childObserver = new MutationObserver(() => {
            this.checkAndRender();
        });
        this.childObserver.observe(this, { childList: true });
    }

    attributeChangedCallback() {
        // 属性变化时检查是否可以渲染
        this.checkAndRender();
    }

    connectedCallback() {
        // 兜底：如果还没渲染，插入DOM时触发
        this.checkAndRender();
    }

    checkAndRender() {
        // 已渲染过则直接返回
        if (this.isRendered) return;
        
        // 确保关键属性存在（根据业务调整，比如type默认可以设为button）
        const type = this.getAttribute('type') || 'button';
        // 如果是link类型，确保href存在
        if (type === 'link' && !this.getAttribute('href')) return;
        
        // 确保子元素已就绪（可选，根据业务是否需要等待子元素）
        if (!this.firstChild) return;
        
        // 执行渲染和 hydration
        this.render();
        this.hydrate();
        
        // 渲染完成后显示组件
        this.style.display = '';
        this.isRendered = true;
        
        // 停止监听子元素变化，避免后续不必要的触发
        this.childObserver.disconnect();
    }

    render() {
        const type = this.getAttribute('type') || 'button';
        if (type === 'link') {
            this.elmButton = document.createElement('a');
            this.elmButton.setAttribute('href', this.getAttribute('href'));
        } else {
            this.elmButton = document.createElement('button');
            this.elmButton.setAttribute('type', type);
        }
        // 转移子元素到内部按钮
        while (this.firstChild) {
            this.elmButton.appendChild(this.firstChild);
        }
        this.appendChild(this.elmButton);
    }

    hydrate() {
        this.elmButton.addEventListener('click', () => alert('hello world'));
    }

    disconnectedCallback() {
        // 清理观察者，避免内存泄漏
        this.childObserver.disconnect();
    }
}

customElements.define('my-button', MYButton);

方案说明 #

• 属性监听：observedAttributes声明需要监听的属性，属性变化时触发checkAndRender，确保属性更新后能重新检查渲染条件。
• 子元素监听：MutationObserver监听子元素变化，当通过appendChild添加子元素时，会触发检查，保证子元素就绪后再渲染。
• 渲染条件检查：checkAndRender里判断属性和子元素是否就绪，只有满足条件才执行渲染，避免提前渲染导致的错误。
• FOUC 解决：初始隐藏组件，渲染完成后再显示，用户不会看到未样式化的内容。
• 内存清理：在disconnectedCallback里断开MutationObserver，避免内存泄漏。

测试场景验证 #

1. 初始在DOM中的组件：页面加载时，属性和子元素已存在，checkAndRender会在connectedCallback触发前（或同时）完成渲染，不会出现FOUC。
2. 动态创建的组件：用document.createElement('my-button')创建后，设置属性、添加子元素时，会触发属性监听或子元素监听，自动执行渲染，插入DOM前就已完成渲染，插入后直接显示成品。

内容的提问来源于stack exchange，提问作者Oscar