data-*属性不能直接当状态用，因其dataset只读取初始值且值全为字符串，框架无法感知后续变更；hidden和class是少数能触发原生dom更新的全局属性。
HTML全局属性在跨平台渲染中不是“写了就管用”，很多看似安全的写法，在 iOS Safari、微信 X5、鸿蒙 WebView 或旧版 Edge 中会直接失效或行为错乱——核心问题不在属性本身，而在浏览器如何解析、是否监听变更、以及框架是否桥接了这个变更。
data-* 属性读取值全是字符串，且不响应后续修改
你写 data-count="42"，JS 里用 el.dataset.count 拿到的是 "42"，不是数字；data-active="true" 解析出来是字符串 "true"，不是布尔值。更关键的是：dataset 只读取初始 HTML 中的值，后续用 el.setAttribute('data-count', '100') 修改，el.dataset.count 依然返回 "42"。
- 常见错误现象：React/Vue 组件挂载后动态改
data-id，但组件没重渲染——因为框架没监听 DOM 属性变更 - SSR 渲染的 HTML 中
data-config='{"theme":"dark"}'被客户端 JS 当 JSON 解析，没加try/catch就崩了 - 正确做法：一律用
el.getAttribute('data-foo')读取，用el.setAttribute('data-foo', value)设置；需要类型转换时手动做JSON.parse()或Number()
hidden 和 class 是少数能触发原生 DOM 更新的全局属性
hidden 是布尔属性，存在即隐藏（等价于 display: none），删掉就显示；class 变更会触发浏览器样式重计算和重排，所有主流框架都能感知。
-
hidden在旧版 Safari/IE 中支持不稳定，需 fallback：el.hidden ? el.style.display = 'none' : el.style.display = '' - 操作
class优先用el.classList.toggle('loading')，别直接拼className字符串，避免覆盖其他类名 -
title、lang、dir这类属性变更，不会触发任何 UI 重绘，只影响辅助技术或提示文本
自定义元素中 data-* 不自动响应，必须显式声明监听
原生 data-* 属性在 customElements.define() 里默认不响应变更。想让 <my-card data-theme="dark"></my-card> 的 theme 改变时触发逻辑，必须：
- 在类定义中声明静态属性：
static get observedAttributes() { return ['theme']; }（注意：不含data-前缀） - 实现
attributeChangedCallback(attrName, oldValue, newValue)处理变更 - 只监听已声明的属性名，
data-foo必须写成'foo'才生效 - 没调用
this.attachShadow({ mode: 'closed' })，那它还是普通 light DOM，所有样式和事件照常穿透
微前端里 data-* 不是隔离开关，只是选择器前缀载体
很多人以为给子应用容器加个 data-subapp="a" 就能隔离样式，其实不行。CSS 规则要真正生效，得靠构建时重写或运行时注入。
- qiankun 的
strictStyleIsolation: true会在挂载时把所有.btn改成[data-qiankun="sub-app-a"] .btn，你手动写的data-不参与这个流程 - MicroApp 直接用
<micro-app name="xxx"></micro-app>标签作为选择器前缀，等价于自动包裹一层micro-app[name="xxx"] - 单独写
<div data-app="a"></div>+div[data-app="a"] .btn { color: red }，若没配合 PostCSS 插件或运行时重写，第三方库的.ant-btn依然全局生效
最易被忽略的一点：viewport meta 标签写错或缺失，会让所有基于 data-、class、媒体查询的跨平台适配全部失效——它才是整个响应式链条的第一道闸门，不是可选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
