<p>纯 HTML 无法实现基于属性驱动的自动渲染，需 JavaScript 主动读取 data- 等属性并手动更新 DOM；Custom Element 中 attributeChangedCallback 须显式声明 observedAttributes 且仅响应字符串值，首次属性值需在 connectedCallback 中同步，data-* 仅为数据容器，hidden/disabled/required/aria-hidden 等需协同更新以保障功能与无障碍。</p>
纯 HTML 无法实现“基于属性驱动的自动渲染”——它没有响应式引擎、不执行 JS 表达式、也不监听属性变化。所谓“属性驱动渲染”，实际是 JavaScript 主动读取 HTML 属性（如 data-、disabled、hidden），再调用 DOM 操作或框架 API 触发更新。别指望写个 data-count="5" 就让页面数字自动变。
attributeChangedCallback 只响应 HTML 属性变更，且需手动声明
在 Custom Element 中，attributeChangedCallback 不是“开箱即用”的响应机制：它只对 observedAttributes 列表里明确写出的属性名生效，且只接收字符串值；首次渲染时已存在的属性不会触发该回调。
- 必须在类定义中显式返回数组：
static get observedAttributes() { return ['count', 'status']; } - 拼错属性名（比如写成
'cnt'）或漏写，回调就永远不会执行 -
connectedCallback里要手动同步一次初始值，否则挂载时状态不一致 - 若属性值是布尔或数字，需自行转换：
this._count = Number(newValue)，不能直接当数字用
data-* 属性不是信号，只是数据容器
data-step="2" 这类属性本身不触发任何行为，也不会自动影响样式或交互。它的价值在于提供可预测、易读取的上下文标识，但必须配合 JS 主动读取 + 手动更新。
- 命名必须小写+短横线：
data-active="true"→el.dataset.active可读；dataActive="true"会变成el.dataset.active（浏览器自动标准化） - 布尔值务必显式赋值：
data-disabled="true"，而非仅data-disabled（后者dataset.disabled返回空字符串，容易被if (el.dataset.disabled)误判为 false） - 不要在模板里写
onclick="updateStatus(this)"这类内联 JS，逻辑分散且无法访问组件私有状态
hidden / disabled / class 等属性需同步更新，否则表单/无障碍失效
仅靠 JS 修改一个属性，往往不够。例如隐藏字段时，hidden 控制显示，removeAttribute('required') 控制校验，aria-hidden="true" 影响读屏器——三者不同步就会出问题。
立即学习“前端免费学习笔记（深入）”；
-
hidden是布尔属性，存在即隐藏；移除即恢复，语义清晰，比style="display:none"更可靠 - 表单字段条件显示时，
required必须随hidden状态同步增删，否则提交时仍会校验不可见字段 -
disabled对原生表单控件有效，但对自定义元素（如<my-button>）无默认行为，需手动加pointer-events: none和opacity: 0.5等样式 - 用
classList.toggle('loading', el.dataset.loading === 'true')比反复设className更安全，避免覆盖其他 class
真正麻烦的从来不是“怎么让属性变”，而是“谁来监听它变、在哪变、变完做什么”。HTML 属性只是信标，不是引擎——你得自己装驱动、接线路、写逻辑。漏掉 observedAttributes 声明、忘了同步 required、把 dataset 当布尔直接判断，都是上线后才暴露的坑。
