HTML组件化开发中配置项传递的用法是什么？-html教程-PHP中文网

data-*属性仅用于初始化参数注入，非响应式通道；其本质为字符串容器，不解析、不校验、不自动转类型，无法触发重渲染，仅适用于全局配置或组件首次挂载的初始参数。

html组件化开发中配置项传递的用法是什么？

data-* 属性只适合初始化参数注入，不是响应式通道

data-* 属性本质是字符串容器，浏览器不解析、不校验、不自动转类型。它只在页面加载时静态存在，不能当状态管理工具用——改了 setAttribute('data-theme', 'dark') 不会自动触发组件重渲染，除非你手动监听并处理。

适用场景：全局配置挂载（如），或组件首次挂载时的初始参数（如 <my-card data-user-id="123"></my-card>）
不适用场景：频繁更新的 UI 状态（比如切换主题、刷新列表）、跨组件共享状态、跨页面传递
常见错误：把 data-config='{"timeout":5000}' 当成对象直接用 el.dataset.config.timeout，结果报 Cannot read property 'timeout' of undefined —— 因为 dataset.config 是字符串，不是对象

自定义元素中让 data-* 触发响应逻辑的三个硬条件

想让 attributeChangedCallback 响应 data-* 变更，必须同时满足三件事，缺一不可。

observedAttributes 静态 getter 中显式列出小写连字符格式的完整属性名，例如 ['data-user-id', 'data-mode']；写 'data-*' 或 'dataUserId' 都无效
变更必须走 DOM API：el.setAttribute('data-user-id', '456') 才触发回调；el.dataset.userId = '456' 完全不会进 attributeChangedCallback
回调里拿到的 newValue 永远是字符串，哪怕 HTML 里写的是 data-count="42"，也得自己转：this._count = +newValue 或 JSON.parse(newValue)（注意先判空）

dataset 读取命名和类型转换的坑

dataset 表面方便，实际全是陷阱：命名映射不直观、类型全是字符串、特殊字符易出错。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

HTML 写 data-api-url="/v2"，JS 必须用 el.dataset.apiUrl —— el.dataset.api-url 或 el.dataset.APIUrl 都返回 undefined
el.dataset.active 是字符串 "true"，不是布尔值；if (el.dataset.active) 对 "false" 也成立；正确写法是 el.dataset.active === "true"
el.dataset.count 是 "42"，不是数字；别用 parseInt(el.dataset.count) —— 值要是 "42px" 就截成 42；稳妥写法是 +el.dataset.count 或 Number(el.dataset.count)

跨页面传参别碰 data-*，该用啥就用啥

data-* 刷新即丢，新开标签页就没了，根本不是跨页面机制。

跳转带简单参数：用 URL 查询字符串 + URLSearchParams，例如 location.href = "detail.html?uid=123"，目标页用 new URLSearchParams(window.location.search).get('uid')
传对象或需持久化：存 sessionStorage，跳转前 sessionStorage.setItem('user', JSON.stringify(obj))，目标页读完立刻 removeItem
跨域 iframe 或 SSO 场景：唯一可靠的是 postMessage，别试 localStorage 或 URL 参数