如何为自定义Web Component的子元素设置值？

我来帮你搞定这个只封装<progress>的Web Component，先给你完整的可运行代码，再拆解关键细节：

完整代码示例 #

<template id="my-element">
  <style>
    /* 可自定义progress的样式 */
    progress {
      width: 100%;
      height: 20px;
    }
  </style>
  <progress max="100"></progress>
</template>

<my-element value="30"></my-element>
<my-element id="dynamicProgress"></my-element>

<script>
class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['value', 'max']; // 把max也加入观察，让组件更灵活
  }

  // 修复value getter：返回实际数值而非布尔值
  get value() {
    return parseInt(this.getAttribute('value')) || 0;
  }

  set value(val) {
    const numVal = parseInt(val);
    if (!isNaN(numVal) && numVal >= 0) {
      this.setAttribute('value', numVal);
    } else {
      this.removeAttribute('value');
    }
    // 同步更新shadow里的progress元素
    this._updateProgressValue();
  }

  // 可选：添加max的getter/setter
  get max() {
    return parseInt(this.getAttribute('max')) || 100;
  }

  set max(val) {
    const numVal = parseInt(val);
    if (!isNaN(numVal) && numVal > 0) {
      this.setAttribute('max', numVal);
    } else {
      this.removeAttribute('max');
    }
    this._updateProgressMax();
  }

  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    // 获取template内容并克隆到shadow DOM
    const template = document.querySelector('#my-element');
    const instance = template.content.cloneNode(true);
    shadowRoot.appendChild(instance);
    // 缓存progress元素，避免重复查询DOM
    this._progress = shadowRoot.querySelector('progress');
    // 初始化值
    this._updateProgressValue();
    this._updateProgressMax();
  }

  // 属性变化时自动同步
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'value') {
      this._updateProgressValue();
    } else if (name === 'max') {
      this._updateProgressMax();
    }
  }

  // 内部方法：更新progress的value
  _updateProgressValue() {
    this._progress.value = this.value;
  }

  // 内部方法：更新progress的max
  _updateProgressMax() {
    this._progress.max = this.max;
  }
}

// 注册自定义元素
customElements.define('my-element', MyElement);

// 动态修改示例
setTimeout(() => {
  document.getElementById('dynamicProgress').value = 75;
}, 1500);
</script>

关键细节解释 #

• 修复value的getter：你原来的get value()返回的是this.hasAttribute('value')，这会得到布尔值，而我们需要返回属性的实际数值，所以改成解析属性值，默认设为0。
• 缓存progress元素：在constructor里获取shadow DOM中的<progress>并缓存为实例属性this._progress，避免每次更新都重新查询DOM，提升性能。
• 双向同步机制：
  • 通过set value(val)设置属性时，同步更新shadow里的progress
  • 通过attributeChangedCallback监听属性的直接修改（比如HTML里的value="30"或者element.setAttribute('value', 50)），自动同步到progress元素
• 扩展max属性：额外加入了max属性的支持，让组件更灵活，你可以根据需求保留或移除这部分。
• template的正确使用：确保你的template存在于HTML中，通过cloneNode(true)深克隆内容到shadow DOM，避免多个组件实例共用同一个DOM节点。

如果你原来的代码里instan...是指template实例化的部分，上面的代码已经补全了这部分逻辑，确保组件能正常工作。

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