html模板无法直接将属性值传给组件，必须通过构建时（如vite-plugin-html注入window.app_config）或运行时（如ssr序列化后js解析）两种安全路径实现，data-*属性仅作dom标记，需手动桥接至组件props。
HTML模板里怎么把属性值传给组件
HTML模板本身不执行逻辑，所谓“属性注入”其实是构建时或运行时把数据塞进模板占位符，再由框架/脚本解析成组件可用的属性。关键在于：你用的是什么构建工具、模板引擎、以及组件是否在客户端渲染。
- 如果是
html-webpack-plugin+ EJS 模板，用这类语法，但必须确保templateParameters对象里是已解构的字符串，不能直接写process.env.THEME - 如果是 Vite +
vite-plugin-html，配置inject: { theme: JSON.stringify('dark') }，否则含引号或换行的值会破坏 HTML 结构 - 纯静态 HTML 没有运行时能力，
data-theme="dark"只能被 JS 手动读取，比如document.querySelector('[data-component]').dataset.theme，它不是自动绑定到组件实例上的“属性”
Vue/React 组件里读不到 templateParameters 注入的值？
因为 templateParameters 只影响 HTML 字符串生成，不会自动挂载到 Vue 实例或 React props 上。它只是把一段文本塞进 HTML 文件里，后续得靠你自己桥接。
- 常见错误：在 index.html 里写了
<div id="app" data-theme="<%= theme %>">，但在 Vue 组件里直接访问 <code>this.$attrs.theme—— 不会生效，data-*不等于组件 prop - 正确做法：在 main.js 或入口 JS 中读取
document.getElementById('app').dataset.theme，再作为 prop 传给根组件，或写入window.__INITIAL_DATA__供组件消费 - React 同理：不能指望 JSX 的
<app theme="{...}"></app>自动从 HTML 属性里取值，必须手动提取并透传 - 浏览器刷新后
dataset全丢，而组件状态可能还活着，两者生命周期不同步 - dataset 值全是字符串，
data-count="1"读出来是"1"，不是数字1，需手动转换 - 如果组件用了
defineProps或PropTypes校验类型，原始dataset值大概率通不过 - 构建时注入：用
html-webpack-plugin或vite-plugin-html把环境变量转成全局变量（如window.APP_CONFIG = { theme: 'dark' }），组件启动时读取，适合静态配置 - 运行时注入：服务端渲染（SSR）或 hydration 时，把初始数据序列化进 HTML 的
<script id="__INITIAL_STATE__">...</script>，客户端 JS 解析后传给根组件，适合用户态数据（如登录态、偏好设置） - 切记：所有注入值若含用户输入或动态内容，必须先
JSON.stringify()再插入 HTML，否则引号、尖括号会直接破坏 DOM 结构
为什么 data- 属性不能当组件 props 直接用
data- 是 DOM 层级的标记，不是框架的数据绑定通道。Vue 的 v-bind:、React 的 JSX 属性、Svelte 的 bind: 都只响应 JS 对象字段变化，不监听 DOM dataset 变更。
真正安全可靠的注入路径只有两条
一条走构建时，一条走运行时初始化。别试图让 HTML 模板“智能地”把属性喂给组件——它没这个能力，也不该承担这个职责。
