关于Reflected Attributes：内部属性变更传递至外部observed attribute的用途及示例

首先，咱们得先搞懂Reflected Attributes（反射属性）到底是什么——在Web Components（尤其是自定义元素）的场景里，它指的是自定义元素的内部JS属性和**外部HTML观察属性（observed attribute）**之间的双向同步机制。简单来说就是：改了JS里的属性，对应的HTML属性会自动跟着变；反过来改HTML属性，JS里的属性也会同步更新，两者就像镜子一样互相映射。

这个同步机制的核心目的和用途主要有这几点：

• 保持DOM状态一致性：避免出现「JS逻辑里属性是A，但HTML代码里属性还是B」的脱节情况，不管是调试还是后续维护，都能让元素的状态一目了然。
• 兼容声明式与命令式开发：开发者既可以直接在HTML里通过属性设置元素初始状态，也能通过JS动态修改属性，两种操作的效果完全同步，适配不同的开发习惯和场景。
• 对齐原生DOM行为：很多原生HTML元素本身就有这种反射特性（比如<input>的value属性，修改input.value会同步到HTML的value属性，反之亦然），自定义元素遵循这个规则，能让开发者用起来更顺手，降低学习成本。
• 支持样式与组件联动：HTML属性可以作为CSS选择器的目标（比如[disabled]伪类），同步属性后，样式能实时响应内部状态的变化；同时其他依赖该属性的组件也能及时感知到状态更新，实现更顺畅的组件间交互。

下面用一个自定义开关组件<toggle-switch>来演示反射属性的工作方式，实现checked属性的双向同步：

class ToggleSwitch extends HTMLElement {
  // 声明需要观察的HTML属性
  static get observedAttributes() {
    return ['checked'];
  }

  constructor() {
    super();
    // 初始化内部状态
    this._checked = false;
    // 绑定点击事件切换状态
    this.addEventListener('click', () => {
      this.checked = !this.checked;
    });
  }

  // 定义checked属性的getter
  get checked() {
    return this._checked;
  }

  // 定义checked属性的setter，实现内部属性到HTML属性的反射
  set checked(value) {
    const isChecked = Boolean(value);
    this._checked = isChecked;
    // 同步到HTML属性：为true时添加属性，false时移除
    isChecked ? this.setAttribute('checked', '') : this.removeAttribute('checked');
    // 更新UI显示
    this.updateUI();
  }

  // 当HTML属性变化时，同步到内部属性
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'checked') {
      this._checked = newValue !== null;
      this.updateUI();
    }
  }

  // 更新开关的UI状态
  updateUI() {
    this.innerHTML = `
      <div class="switch ${this._checked ? 'on' : 'off'}">
        ${this._checked ? '已开启' : '已关闭'}
      </div>
    `;
  }
}

// 注册自定义元素
customElements.define('toggle-switch', ToggleSwitch);

然后在HTML中使用这个组件：

<!-- 声明式设置初始开启状态 -->
<toggle-switch checked></toggle-switch>

<script>
  // 2秒后通过JS动态修改内部属性，会同步到HTML属性
  const switchEl = document.querySelector('toggle-switch');
  setTimeout(() => {
    switchEl.checked = false;
    // 此时查看DOM会发现checked属性已被移除
    console.log(switchEl.hasAttribute('checked')); // 输出false
  }, 2000);
</script>

<style>
  .switch {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
  }
  .switch.on {
    background-color: #2196F3;
    color: white;
  }
  .switch.off {
    background-color: #f44336;
    color: white;
  }
</style>

这个示例里：

1. 点击开关时，JS的checked属性被修改，setter会自动同步更新HTML的checked属性；
2. 如果直接在开发者工具里修改HTML的checked属性，attributeChangedCallback会触发，同步内部的_checked属性并更新UI；
3. 不管是通过HTML声明还是JS操作，组件的状态始终保持一致，完美体现了反射属性的核心作用。

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