编程式设置自定义元素属性时，attributeChangedCallback是否触发？

直接通过colorSpan.bgc = 'BLUE'修改JS属性不会触发attributeChangedCallback，原因在于这个回调的触发逻辑和元素的**HTML属性（Attribute）**绑定，而非DOM元素实例的JS属性（Property）：

1. 核心区别：

   • HTML属性是元素在DOM结构上的特性（比如<color-span bgc="RED">中的bgc），属于DOM层面的标识；
   • JS属性是DOM元素实例作为JS对象拥有的属性，默认和HTML属性互不关联。

2. 触发attributeChangedCallback的场景：

   • 声明式在HTML中直接设置属性（如<color-span bgc="RED">Hello From Color Span</color-span>）；
   • 使用element.setAttribute('bgc', 'BLUE')方法修改HTML属性；
   • 通过开发者工具动态修改元素的HTML属性。

3. 让JS属性修改也触发回调的方法：
   如果需要通过colorSpan.bgc = 'BLUE'这种方式修改时也触发回调，需要在自定义元素中手动定义getter和setter，同步JS属性与HTML属性：

   class ColorSpan extends HTMLElement {
     static get observedAttributes() {
       return ['bgc'];
     }
   
     // 定义getter，读取HTML属性值
     get bgc() {
       return this.getAttribute('bgc');
     }
   
     // 定义setter，修改HTML属性
     set bgc(value) {
       this.setAttribute('bgc', value);
     }
   
     attributeChangedCallback(name, oldValue, newValue) {
       if (name === 'bgc' && oldValue !== newValue) {
         this.style.backgroundColor = newValue.toLowerCase();
       }
     }
   }
   customElements.define('color-span', ColorSpan);
   

这样修改colorSpan.bgc时，setter会自动调用setAttribute，进而触发attributeChangedCallback。

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