WebComponents跨容器移动时connectedCallback触发两次引发重复渲染

问题根因定位 #

• 钩子命名规范错误：代码中定义的DisconnectedCallback首字母大写，不符合Web Components标准要求的全小写disconnectedCallback规则，浏览器不会将其识别为自定义元素的生命周期回调，导致组件脱离DOM时的清理逻辑从未执行
• 清理逻辑实现无效：即便钩子命名正确，this.shadowRoot.removeChild(this.getTemplate())的逻辑也无法完成清理——getTemplate()每次调用都会生成一个全新的、未挂载到shadowRoot的临时模板节点，并非之前已插入的渲染内容，调用removeChild传入这个不存在的节点，要么静默失败要么抛出找不到节点的错误
• 渲染逻辑无幂等性：render()方法每次执行都直接往shadowRoot末尾追加模板片段，没有提前清空已有内容。DOM元素跨容器移动的过程，本质是“从原容器脱离（触发disconnectedCallback）→挂载到新容器（触发connectedCallback）”，第二次触发connectedCallback时直接追加新内容，就会和第一次的渲染内容叠加，出现重复渲染
• 业务流程设计冗余：当前流程是先把所有组件统一挂载到通用容器，再将组件逐个移动到分组div中，这个移动行为本身就会额外触发一次组件的connected/disconnected生命周期，加剧重复渲染问题

具体修复方案 #

1. 修正自定义组件核心逻辑 #

调整组件的渲染、生命周期逻辑为幂等可重复触发状态，无论connectedCallback被触发多少次，都保证shadowRoot内只有一份渲染内容：

class courseItem extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: 'open'});
    }

    static get observedAttributes() {
        return ['emoji', 'coursetitle', 'date', 'difficulty', 'url']
    }

    attributeChangedCallback(attr, oldVal, newVal) {
        if (attr === 'emoji') {
            this.emoji = newVal;
        }
        // 其他属性处理逻辑...
    }

    getTemplate() {
        const template = document.createElement('template');
        template.innerHTML = `
        /*模板HTML内容*/
        ${this.getStyle()}
        `
        return template;
    }

    getStyle() {
        return `
            <style>
            /*样式内容*/
            </style>
        `
    }

    render() {
        // 渲染前先清空shadowRoot现有内容，避免重复追加
        this.shadowRoot.innerHTML = '';
        const templateContent = this.getTemplate().content.cloneNode(true);
        this.shadowRoot.appendChild(templateContent);
    }

    connectedCallback() {
        this.render();
    }

    // 修正为规范要求的全小写生命周期钩子名
    disconnectedCallback(){
        // 因渲染逻辑已做幂等处理，无需在此手动清理shadowRoot内容
    }
}
customElements.define('course-item', courseItem);

2. 优化业务流程，减少不必要的组件挂载/脱离 #

调整原有“先攒组件到通用容器、再拆分移动”的流程，在创建组件的阶段就直接按2个、3个的分组规则把组件塞进对应的分组div中，从根源上避免跨容器移动触发的重复生命周期：

function fetchPosts() {
    const URL = `${API_URL}posts/`;
    fetch(URL, {method:"GET", headers: {Authorization: `Token ${AUTH_TOKEN()}`}})
        .then(response => response.json())
        .then(data => data.sort((a, b) => b.id - a.id))
        .then(data => {
            const mainContent = document.querySelector('.main-content');
            // 按2个、3个循环的规则配置分组大小
            const groupSizeCycle = [2, 3];
            let cycleIndex = 0;
            let currentGroup = document.createElement('div');
            let currentGroupItemCount = 0;

            data.forEach(element => {
                const component = document.createElement('course-item');
                component.setAttribute('class', 'course-container')
                // 配置其他需要的属性...
                
                // 直接把组件加到当前分组，不需要先挂到通用容器
                currentGroup.append(component);
                currentGroupItemCount++;

                // 当前分组达到预设大小，挂载到页面并切换到新分组
                if (currentGroupItemCount === groupSizeCycle[cycleIndex]) {
                    mainContent.append(currentGroup);
                    cycleIndex = (cycleIndex + 1) % groupSizeCycle.length;
                    currentGroup = document.createElement('div');
                    currentGroupItemCount = 0;
                }
            })
        })
        .catch(err => console.error(err))
}

补充说明 #

如果坚持保留原有的“先挂通用容器再移动分组”的流程，只要render()方法做了“先清空再渲染”的幂等处理，哪怕connectedCallback被触发两次，也不会出现重复渲染的问题——因为第二次渲染时会先把第一次的内容清空，再追加新的模板内容，最终shadowRoot内始终只会保留一份渲染结果。

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