data-*属性本身不触发状态更新，需javascript读取dataset值后手动更新；命名须小写连字符（如data-step="2"），布尔值显式赋"data-active='true'"，数值需number()转换，且attributechangedcallback不响应初始html属性。
data-* 属性如何触发组件状态更新
HTML 的 data-* 属性本身不触发任何行为，它只是静态容器；真正驱动状态变化的是 JavaScript 主动读取这些值并响应。常见错误是以为写上 data-status="loading" 就能让按钮自动变灰——不会，必须配合 element.dataset.status 读取 + 手动切换类或样式。
使用场景集中在：同一组件在不同上下文复用（如多个 <status-indicator></status-indicator> 显示不同阶段）、服务端渲染后轻量客户端增强、或规避复杂状态管理库的简单页面。
- 推荐统一用小写字母+短横线命名，如
data-step="2"，避免驼峰，否则dataset.stepTwo不会生效（浏览器自动转为小写+去横线） - 布尔型状态建议显式赋值
data-active="true"而非仅data-active，因为dataset.active对后者返回空字符串，易被误判为 false - 数值型需手动转换：
const step = Number(el.dataset.step)，否则是字符串，"2" > "10"会返回 true
onchange/oninput 绑定到自定义元素内部表单控件
如果你的自定义组件里封装了 <select></select> 或 <input type="checkbox">，直接在子控件上写 onchange 是可行的，但要注意事件作用域和 this 指向——它指向的是子控件，不是自定义元素实例。
更稳妥的做法是：在自定义元素的 connectedCallback 中用 addEventListener 绑定，并在回调中调用组件方法。这样能确保 this 指向组件实例，也便于统一清理（比如在 disconnectedCallback 中移除监听器）。
- 避免在模板里写内联 JS，例如
<select onchange="handleSelect(this)"></select>，这会让逻辑散落，且无法访问组件私有属性 - 如果组件需要对外暴露状态变更，应派发自定义事件：
this.dispatchEvent(new CustomEvent('valuechange', { detail: newValue })) -
oninput比onchange更适合实时反馈（如搜索框），但注意性能：不要在其中直接做 heavy operation，可加防抖
disabled 和 aria-disabled 在自定义元素中的区别
disabled 是原生表单控件才识别的布尔属性，对自定义元素（如 <my-button></my-button>）无默认效果；而 aria-disabled="true" 仅影响无障碍读屏器，不阻止点击或键盘交互。
真正禁用自定义组件交互，必须三者齐备：
- 添加
aria-disabled="true"供读屏器识别 - 手动监听
click/keydown并return或event.preventDefault() - 通过 CSS 类（如
.disabled）控制视觉样式，例如opacity: 0.5; pointer-events: none;
漏掉任一环节都会导致可访问性缺陷或逻辑漏洞——比如用户仍能用空格键触发按钮，或屏幕阅读器认为组件可用但实际点不动。
attributeChangedCallback 中哪些属性值得监听
不是所有属性都需要进 attributeChangedCallback。只监听那些直接影响渲染或行为的属性，比如 data-status、disabled、value；像 id、class、style 这些由浏览器自动处理，监听它们纯属冗余。
声明监听前，必须在 observedAttributes 静态 getter 中显式列出，否则回调根本不会触发。常见疏忽是拼写不一致：HTML 写 data-mode，但 observedAttributes 返回 ['data-mood']，结果静默失效。
- 属性名始终是小写，即使 HTML 中写成
DATA-STATUS，回调收到的name参数也是"data-status" - 值变更时，
oldValue和newValue都是字符串，注意类型转换，尤其布尔/数值型 - 避免在回调里直接修改被监听的属性（如
this.setAttribute('data-status', 'done')），否则会无限递归触发自身
真实项目中最容易被忽略的，是 attributeChangedCallback 的触发时机——它只响应通过 setAttribute 或 JS 修改属性引起的变更，不响应初始 HTML 解析时的属性值。所以首次渲染逻辑仍得放在 connectedCallback 或 constructor 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
