data-* 属性如何触发组件状态更新
HTML 的 data-* 属性本身不触发任何行为，它只是静态容器；真正驱动状态变化的是 JavaScript 主动读取这些值并响应。常见错误是以为写上 data-status="loading" 就能让按钮自动变灰——不会，必须配合 element.dataset.status 读取 + 手动切换类或样式。
使用场景集中在：同一组件在不同上下文复用（如多个 <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> 或 <input type="checkbox">，直接在子控件上写 onchange 是可行的，但要注意事件作用域和 this 指向——它指向的是子控件，不是自定义元素实例。
更稳妥的做法是：在自定义元素的 connectedCallback 中用 addEventListener 绑定，并在回调中调用组件方法。这样能确保 this 指向组件实例，也便于统一清理（比如在 disconnectedCallback 中移除监听器）。
立即学习“前端免费学习笔记（深入）”；
避免在模板里写内联 JS，例如 <select onchange="handleSelect(this)">，这会让逻辑散落，且无法访问组件私有属性如果组件需要对外暴露状态变更，应派发自定义事件：this.dispatchEvent(new CustomEvent(‘valuechange’, { detail: newValue }))oninput 比 onchange 更适合实时反馈（如搜索框），但注意性能：不要在其中直接做 heavy operation，可加防抖
disabled 和 aria-disabled 在自定义元素中的区别
disabled 是原生表单控件才识别的布尔属性，对自定义元素（如 <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 里。
评论(0)