自定义元素DOM挂载前后统一更新内容的最优方案

我创建了一个自定义HTML元素，基于以下模板生成新元素：

<template id="track">
  <div class="record">Nothing yet</div>
</template>

定义该自定义元素的JS代码如下：

class Track extends HTMLElement {

  constructor() {
    super();    
    this.template = document.getElementById("track");
    this.clone = this.template.content.cloneNode(true);
  }
    
  connectedCallback() {    
    this.append( this.clone );
  }
  
  set record(html) { 
    // Case 1: 仅在元素挂载到DOM前生效（对应元素el1）
    this.clone.querySelector('.record').innerHTML = html;
    // Case 2: 仅在元素挂载到DOM后生效（对应元素el2）
    //this.querySelector('.record').innerHTML = html;
  }
}

customElements.define('my-track', Track);

其中record属性用于修改<div>的HTML内容。目前存在的问题是：

• 先设置record再挂载元素时，只有修改clone的逻辑生效：

const el1 = document.createElement('my-track');
el1.record = "Bla<b>bla</b> #1";
document.body.append(el1);

• 先挂载元素再设置record时，只有修改DOM中元素的逻辑生效：

const el2 = document.createElement('my-track');
document.body.append(el2);
el2.record = "Bla<b>bla</b> #2";

不想通过判断元素是否挂载来切换逻辑，希望找到set record()方法中同时适配两种场景的最佳方案。

最佳解决方案 #

核心思路是用内部状态作为唯一数据源，统一更新逻辑，避免分别操作clone和DOM元素。修改后的代码如下：

class Track extends HTMLElement {
  constructor() {
    super();
    // 初始化内部状态，存储record的内容
    this._recordContent = "";
    this.template = document.getElementById("track");
    this.clone = this.template.content.cloneNode(true);
  }
    
  connectedCallback() {
    this.append(this.clone);
    // 元素挂载后，同步内部状态到DOM
    this._updateRecordDOM();
  }
  
  set record(html) {
    // 更新内部状态
    this._recordContent = html;
    // 同步状态到DOM（不管是否已挂载）
    this._updateRecordDOM();
  }

  get record() {
    // 提供getter，保证属性读写一致
    return this._recordContent;
  }

  // 封装统一的DOM更新逻辑
  _updateRecordDOM() {
    // 优先获取已挂载到DOM的元素，不存在则操作clone
    const recordEl = this.querySelector('.record') || this.clone.querySelector('.record');
    if (recordEl) {
      recordEl.innerHTML = this._recordContent;
    }
  }
}

customElements.define('my-track', Track);

方案说明 #

1. 单一数据源：用_recordContent私有变量存储内容，所有更新都基于这个状态，避免DOM和clone内容不一致
2. 统一更新逻辑：set record()只负责更新状态，然后调用_updateRecordDOM同步到视图，无需区分挂载状态
3. 挂载时同步：connectedCallback中调用_updateRecordDOM，确保挂载前设置的状态能同步到DOM
4. 属性读写一致：新增get record()，外部可以读取当前的内容状态

这样修改后，无论元素是否已挂载到DOM，设置record属性都能正确更新内容，完全适配两种场景，符合自定义元素的状态驱动设计原则。

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