如何实现Web Component属性更新时仅重渲染受影响元素

问题背景 #

现有原生Web Component通过getter/setter修改属性时，会触发全量重渲染，导致包括无关子组件在内的整个组件重新渲染，需要优化为仅更新受属性变更影响的DOM元素。

原始问题代码 #

基础版本（无父子组件） #

class MyElement extends HTMLElement {
    constructor() {
        super();
        // Props
        this._color = this.getAttribute("color");
        this._myArray = this.getAttribute("myArray");
        // Shadow DOM
        this._shadowRoot = this.attachShadow({ mode: "open" });
        this.render();
    }
    template() {
        const template = document.createElement("template");
        template.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                span {color: ${this.color}}
            </style>
            <p>Notice the console displays three renders: the original, when color changes to blue after 2 secs, and when the array gets values</p>
            <p>The color is: <span>${this.color}</span></p>
            <p>The array is: ${this.myArray}</p>
            
        `;
        return template;
    }
    get color() {
        return this._color;
    }
    set color(value) {
        this._color = value;
        this.render(); 
    }
    get myArray() {
        return this._myArray;
    }
    set myArray(value) {
        this._myArray = value;
        this.render();
    }

    render() {
        // Debug only
        const props = Object.getOwnPropertyNames(this).map(prop => {
            return this[prop] 
        })
        console.log('Parent render; ', JSON.stringify(props));
        // end debug
        this._shadowRoot.innerHTML = '';
        this._shadowRoot.appendChild(this.template().content.cloneNode(true));
    }
}

window.customElements.define('my-element', MyElement);

<!DOCTYPE html>

<head>
    <script type="module" src="./src/my-element.js" type="module"></script>
    <!-- <script type="module" src="./src/child-element.js" type="module"></script> -->
</head>

<body>
    <p><span>Outside component</span> </p>
    <my-element color="green"></my-element>
    <script>
        setTimeout(() => {
            document.querySelector('my-element').color = 'blue';
            document.querySelector('my-element').myArray = [1, 2, 3];
        }, 2000);
    </script>
</body>

带父子组件版本 #

import {ChildElement} from './child-element.js';
class MyElement extends HTMLElement {
    constructor() {
        super();
        // Props
        this._color = this.getAttribute("color");
        this._myArray = this.getAttribute("myArray");
        // Shadow DOM
        this._shadowRoot = this.attachShadow({ mode: "open" });
        this.render();
    }
    template() {
        const template = document.createElement("template");
        template.innerHTML = `
            <style>
                span {color: ${this.color}}
            </style>
            <p>The color is: <span>${this.color}</span></p>
            <p>The array is: ${this.myArray}</p>
            <child-element></child-element>
        `;
        return template;
    }
    get color() {
        return this._color;
    }
    set color(value) {
        this._color = value;
        this.render(); // 触发全量重渲染
    }
    get myArray() {
        return this._myArray;
    }
    set myArray(value) {
        this._myArray = value;
        this.render();
    }
    render() {
        this._shadowRoot.innerHTML = '';
        this._shadowRoot.appendChild(this.template().content.cloneNode(true));
    }
}

window.customElements.define('my-element', MyElement);
window.customElements.define('child-element', ChildElement);

优化方案 #

核心思路是初始化时一次性渲染完整模板，后续仅更新受属性变化影响的DOM节点，避免全量清空重渲染：

1. 给需要更新的DOM元素添加唯一id，方便快速定位
2. 拆分渲染逻辑为初始化渲染和局部更新方法
3. 修改setter逻辑，不再调用全量render，而是针对性更新对应元素

修改后的代码 #

import {ChildElement} from './child-element.js';
class MyElement extends HTMLElement {
    constructor() {
        super();
        // Props
        this._color = this.getAttribute("color") || "black";
        this._myArray = this.getAttribute("myArray") || "";
        // Shadow DOM
        this._shadowRoot = this.attachShadow({ mode: "open" });
        // 初始化时仅渲染一次完整模板
        this.initRender();
    }

    initRender() {
        const template = document.createElement("template");
        template.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                #color-span {color: ${this.color}}
            </style>
            <p>The color is: <span id="color-span">${this.color}</span></p>
            <p id="array-text">The array is: ${this.myArray}</p>
            <child-element></child-element>
        `;
        this._shadowRoot.appendChild(template.content.cloneNode(true));
        // 缓存需要更新的DOM节点，避免重复查询
        this._colorSpan = this._shadowRoot.getElementById("color-span");
        this._arrayText = this._shadowRoot.getElementById("array-text");
    }

    get color() {
        return this._color;
    }
    set color(value) {
        this._color = value;
        // 仅更新颜色相关的DOM元素
        this._colorSpan.textContent = value;
        this._colorSpan.style.color = value;
    }

    get myArray() {
        return this._myArray;
    }
    set myArray(value) {
        // 处理数组转为字符串的逻辑
        this._myArray = Array.isArray(value) ? JSON.stringify(value) : value;
        // 仅更新数组显示文本
        this._arrayText.textContent = `The array is: ${this._myArray}`;
    }
}

window.customElements.define('my-element', MyElement);
window.customElements.define('child-element', ChildElement);

优化说明 #

• 缓存DOM节点：初始化时查询并缓存需要更新的元素，避免每次更新都重复调用getElementById
• 局部更新：每个setter仅修改对应属性关联的DOM元素，不会清空shadowRoot或重新渲染子组件
• 样式与内容分离更新：颜色属性同时更新文本内容和样式，确保视觉效果同步
• 数组处理：统一数组转字符串的逻辑，避免模板渲染时的格式问题

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