自定义元素嵌套创建时属性无法设置/获取问题求助

这个问题的核心在于Custom Element构造函数的执行时机：当你调用document.createElement('x-bar')时，Bar类的构造函数会立刻执行，而此时你还没调用b.setAttribute('val', ...)来设置属性。所以在Bar的构造函数里通过this.getAttribute('val')获取到的是null，自然就显示了默认值"no value"。

Custom Elements的构造函数设计上应该只做一些基础的初始化工作（比如创建影子DOM、绑定事件监听器），不能依赖元素的属性值——因为在构造阶段，元素的属性可能还没被设置，或者元素还没被插入到DOM树中。

我们需要利用Custom Elements的属性变更回调机制，也就是observedAttributes和attributeChangedCallback，让元素在属性被设置（或修改）时自动更新内容。具体修改如下：

1. 修改Bar类，添加属性监听和变更回调 #

class Bar extends HTMLElement {
  // 声明需要监听的属性列表
  static get observedAttributes() {
    return ['val'];
  }

  constructor() {
    super();
    // 仅初始化影子DOM结构，不直接依赖属性值
    const shadow = this.attachShadow({ mode: 'open' });
    this.wrapper = document.createElement('div');
    this.wrapper.innerHTML = `
      <div class='bar'>
        <span></span>
      </div>
    `;
    this.valueSpan = this.wrapper.querySelector('span');
    shadow.appendChild(this.wrapper);
    // 初始化时同步一次属性值（兼容静态定义的元素）
    this.updateDisplayValue();
  }

  // 属性发生变更时触发的回调
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'val') {
      this.updateDisplayValue();
    }
  }

  // 封装更新显示内容的方法
  updateDisplayValue() {
    const val = this.getAttribute('val') || 'no value';
    this.valueSpan.textContent = val;
  }
}
customElements.define('x-bar', Bar);

2. Foo类可保持原有逻辑不变 #

class Foo extends HTMLElement {
  constructor() {
    super();
    const loop = this.getAttribute('loop') || 10;
    const shadow = this.attachShadow({ mode: 'open' });
    const wrapper = document.createElement('div');
    for(let i=0; i<loop; i++){
      const b = document.createElement('x-bar');
      b.setAttribute('val', `value #${i}`);
      wrapper.appendChild(b);
    }
    shadow.appendChild(wrapper);
  }
}
customElements.define('x-foo', Foo);

方案说明 #

• 当Foo中创建x-bar并设置val属性时，attributeChangedCallback会被触发，此时updateDisplayValue方法就能正确获取到最新的属性值并更新显示内容。
• 即使元素是静态写在HTML中的（比如<x-bar val="test"></x-bar>），构造函数里的updateDisplayValue也能初始化正确的内容。

另外还有一种可选方案：如果不想用属性监听，也可以在创建x-bar时先设置属性，再通过customElements.upgrade()手动升级元素，但这种方法不如属性回调机制优雅，推荐使用标准的属性变更回调方案。

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