为何自定义元素设置属性后attributeChangedCallback未执行？

问题根源 #

你遇到的attributeChangedCallback不触发，不是拼写错误，核心原因是：

• 根据Web Components规范，自定义元素的constructor执行阶段，元素还未完成初始化（未连接到DOM、未完成自定义元素注册流程），此时调用setAttribute修改属性，不会触发attributeChangedCallback。

解决办法 #

把设置属性的逻辑移到connectedCallback中——这个回调会在元素被插入DOM时触发，此时属性变更会正常触发监听回调：

customElements.define('chat-app', class extends HTMLElement {
  constructor () {
    super()
    this.attachShadow({ mode: 'open' })
    this.username = localStorage.getItem('username')
  }

  connectedCallback() {
    // 元素插入DOM后再设置属性，触发回调
    this.setAttribute('username', this.username)
  }

  static get observedAttributes() {
    return [ 'username' ]
  }

  attributeChangedCallback (name, oldValue, newValue) {
    console.log('Username was set.')
  }
})

额外提醒 #

注意区分HTML属性（attribute）和JS对象属性（property）：

• 你直接给this.username赋值是设置的JS实例属性，和元素的HTML attribute是两个独立的东西；只有通过setAttribute修改的HTML属性，才会触发observedAttributes对应的attributeChangedCallback。

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