html属性不驱动web components行为，需javascript主动读取并响应；data-*属性为静态字符串，须在connectedcallback等中用dataset读取并手动更新状态、样式、无障碍属性；attributechangedcallback仅响应动态修改且需预声明观察属性。
HTML 属性本身不驱动 Web Components 行为，必须配合 JavaScript 主动读取 + 手动响应，否则改了也白改。
data-* 属性不会自动触发状态更新
写 data-status="loading" 到 <my-button></my-button> 上，按钮不会自动变灰或禁用——浏览器只把它当静态字符串存着。真正起作用的是你写的 JS 逻辑：在 connectedCallback 或事件回调里调用 element.dataset.status，再根据值手动切换 class、设置 aria-disabled、或调用内部方法。
- 命名必须小写+短横线：
data-step-count→dataset.stepCount可读；data-stepCount→dataset.stepcount（全小写且去横线），拿不到 - 布尔值别省略值：
data-active="true"，而不是data-active；后者读出来是空字符串，if (el.dataset.active)会误判为 false - 数值要转类型：
Number(el.dataset.delay)，否则"10" > "2"是 false（字符串比较） -
attributeChangedCallback不响应初始 HTML 属性——首次渲染时的data-*不会进这个钩子，得靠connectedCallback主动读
标准属性如 disabled 在自定义元素中无效
disabled 是原生表单控件（<button></button>、<input>）才识别的布尔属性，对 <my-button></my-button> 这类自治型自定义元素没默认效果。它既不阻止点击，也不影响样式或读屏器。
- 视觉禁用需手动加 class：
el.classList.add('disabled')，并配 CSS 规则 - 交互拦截必须监听事件：
el.addEventListener('click', e => e.preventDefault()) - 无障碍支持靠
aria-disabled="true"，仅告诉读屏器，不拦操作 - 三者缺一不可：class 控样式、事件监听控行为、
aria-disabled控语义
attributeChangedCallback 的使用前提和限制
这个生命周期钩子只在通过 setAttribute()、removeAttribute() 等 DOM API 动态修改**被观察的属性**时触发，且必须提前在 observedAttributes 静态 getter 中声明。
- 必须显式定义：
static get observedAttributes() { return ['data-step', 'disabled']; } - 只响应动态变更，不响应初始 HTML 属性或 JS 直接赋值（如
el.disabled = true） - 参数是字符串，即使你设
setAttribute('data-count', 42)，newValue仍是"42"，需自行转换 - 不要在其中做重操作（如重绘、网络请求），它可能高频触发；适合做轻量同步，比如更新内部
<input>的value
formAssociated 场景下 setFormValue 和属性更新的关系
让自定义组件参与表单提交，关键不是改 HTML 属性，而是通过 this.internals.setFormValue() 向浏览器表单系统“注册”当前值。属性变化只是触发它的信号源之一。
-
setFormValue()必须在connectedCallback之后调用，且依赖this.attachInternals()成功 - 监听子
<input>的input事件比监听父组件的data-value更可靠——用户输入才是真实数据源 - 若同时支持属性初始化（如
<my-input value="hello"></my-input>），要在connectedCallback里读this.getAttribute('value')并首次调用setFormValue - 不要在
attributeChangedCallback里直接调setFormValue处理value属性——它不被observedAttributes默认监听，且原生value属性变更不会进该钩子
最易忽略的点：属性只是“信使”，不是“执行者”。Web Components 的行为策略必须由你明确编写响应逻辑，没有隐式绑定，也没有魔法触发。哪怕一个 data- 属性改了十次，只要没代码去读它，就等于没改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
