html无属性驱动渲染能力，需javascript手动读取data-*属性并调用render更新视图；attributechangedcallback仅响应setattribute变更且需显式声明observedattributes；真正驱动渲染的是开发者编写的this.render()调用。
HTML 本身不提供“属性驱动渲染”能力，所谓“基于属性驱动”，本质是用 HTML 属性作输入信号，靠 JavaScript 主动读取 + 手动更新视图来实现——没有自动绑定、没有响应式依赖追踪，全靠你写逻辑补足。
data-* 属性只传参，不触发更新
写 data-step="2" 或 data-active="true" 不会让组件自动变状态。浏览器只存字符串，不会调 render、不会改 class、不会 dispatch 事件。
- 常见错误：在模板里写
<my-card data-status="loading"></my-card>，然后指望它自己显示 loading 动画——不会，必须在connectedCallback里读this.dataset.status，再手动this.shadowRoot.querySelector('.spinner').hidden = false - 数值要转类型：
const step = Number(this.dataset.step)，否则"3" > "10"是true - 布尔值必须显式赋值：
data-active="true"，而不是data-active；后者读出来是空字符串，if (this.dataset.active)会走 false 分支 - SSR 渲染后客户端首次读
dataset，值已存在，但attributeChangedCallback不会触发——得在connectedCallback里手动同步一次
attributeChangedCallback 不是万能监听器
它只响应通过 setAttribute() 或 HTML 初始化时声明的属性变更，且只收字符串。JS 属性（如 this.count++）完全不触发它。
- 必须显式声明
static get observedAttributes()，拼错或漏写，回调压根不执行 - 只监听 HTML attribute，不是 JS property；
el.count = 5不会进回调，el.setAttribute('count', '5')才会 - 首次挂载时已有属性（比如服务端直出），
attributeChangedCallback不触发——这是最容易漏掉的同步点 - 想响应 JS 属性变化，得自己封装：
Object.defineProperty(this, 'count', { set(val) { this._count = val; this.render(); } })
真正能驱动视图更新的 HTML 属性只有几个
别指望 title、lang 或自定义 data- 能触发重绘。能可靠影响 DOM 渲染的，就那么几个：
-
hidden：设为true或删掉，浏览器立刻隐藏/显示，且是布尔属性，用el.hidden = true比setAttribute('hidden', '')更安全（避免 property/attribute 不同步） -
class：用el.classList.toggle('loading')切换状态，CSS 自动生效，比操作innerHTML稳定得多 -
draggable和contenteditable需配合事件使用——单独设属性只改语义，不阻止点击，也不自动聚焦 -
id和tabindex影响可访问性和样式选择器，但不适合承载业务状态（比如不能靠tabindex="-1"表示禁用）
customElements.define 是唯一可控路径
想让 <my-button data-mode="dark"></my-button> 真正响应变化，必须走自定义元素路线。原生 <div data-mode="dark"></div> 加再多 JS 监听也没用——DOM 就是静态容器，没人通知你属性变了。
- 必须继承
HTMLElement，调用customElements.define() - 在
observedAttributes里列明要监听的属性名，大小写和连字符必须严格匹配 HTML 写法（data-step→dataset.step） - 所有状态同步逻辑写在
attributeChangedCallback或connectedCallback里，render 只管操作this.shadowRoot - 别在
constructor里读dataset——此时 DOM 还没挂载，值全是undefined
最常被忽略的点：data-* 是初始化通道，不是状态总线；attributeChangedCallback 是变更钩子，不是响应式引擎；真正驱动渲染的，永远是你写的那一行 this.render() ——不是 HTML，也不是框架，是你自己。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
