<p>data-* 属性是微前端中主应用向子应用静态注入初始配置（如租户ID、主题模式）的最轻量可靠方式，仅在子应用初始化阶段生效，不适用于运行时通信。</p>
HTML 属性本身不参与微前端的跨应用通信，但它是主应用向子应用“静态注入配置”的最轻量、最可靠入口。别指望 data- 属性能自动触发跨 iframe 或远程模块的逻辑，它只在子应用初始化阶段起作用。
为什么 data-* 是微前端插件初始化的首选载体
微前端中，主应用加载子应用（如通过 iframe、custom-element 或 Module Federation 的容器组件）时，需要传递初始上下文：比如租户 ID、主题模式、调试开关。这些值通常不变或极少变更，且必须在子应用 JS 执行前就位。
data- 属性天然满足这个场景——它写在 HTML 标签里，DOM 解析即存在，无需等待 JS 加载或网络请求。
- 主应用只需在挂载点写：
<micro-app data-tenant-id="prod-789" data-theme="dark" src="./subapp.js"></micro-app> - 子应用在
connectedCallback或constructor中直接读：this.getAttribute('data-tenant-id')，无需额外通信通道 - 相比 URL 参数，它不污染地址栏；相比
postMessage，它不依赖端口就绪时机，无竞态风险
observedAttributes 不是为微前端通信设计的，但能用
如果你把子应用封装成自定义元素（customElements.define），并希望它对属性变更做出响应（比如运行时切换主题），就必须显式声明 observedAttributes 静态 getter。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
但注意：这仅适用于同一 DOM 树内的属性变更，不是跨 iframe 或跨微应用的通信机制。
- 必须写小写连字符格式：
['data-theme', 'data-debug']，不能写'data-*'通配 - 只能通过
el.setAttribute('data-theme', 'light')触发attributeChangedCallback，el.dataset.theme = 'light'无效 - 属性值永远是字符串，
data-count="42"读出来是'42'，需手动转：parseInt(this.getAttribute('data-count'), 10)
data-* 和 MessageChannel 的分工边界
别混淆静态配置和动态通信。一个常见错误是试图用 data- 属性传用户操作事件（如点击按钮后更新子应用状态）——这会立刻失控。
-
data-属性：只用于启动时的一次性参数注入（租户、环境、默认路由） -
MessageChannel：用于运行时双向消息（port.postMessage({ type: 'ROUTE_CHANGE', payload: '/user' })），支持结构化数据、响应追踪、错误隔离 - 混用示例：主应用用
data-tenant-id告诉子应用“你是谁”，再用MessageChannel告诉它“现在跳到 /settings”
真正容易被忽略的是生命周期错位：子应用可能在 data- 属性已存在时还未定义自定义元素类，或 attributeChangedCallback 触发时内部状态尚未初始化。务必在回调里加 if (this.shadowRoot) 或 if (this._initialized) 守卫。
