template本身不支持运行时变量注入，需通过html-webpack-plugin的templateparameters将配置传给ejs等模板引擎渲染；web components应通过属性或customevent获取配置，避免混用css变量与js逻辑导致不同步。
template 中怎么传入全局配置对象
HTML 模板本身不支持运行时变量注入，template 标签只是静态片段容器，不能直接接收 JS 对象。真正能注入配置的环节在 html-webpack-plugin 的 templateParameters 配置里——它把数据传给模板引擎（如 EJS、Pug），再由引擎渲染进最终 HTML。
常见错误是试图在纯 HTML 模板中写 <my-header config="window.APP_CONFIG"></my-header>，这只会当字符串字面量处理，不会触发 JS 解析。
- 必须用支持表达式的模板引擎（EJS 最轻量，推荐）
-
templateParameters里传的对象会变成模板作用域变量，例如{ theme: "dark", apiBase: "/v1" }→ 在 EJS 中可直接用 - 若需在组件初始化时读取，得把配置序列化为 JSON 字符串塞进自定义属性：
<c-app data-config="<%= JSON.stringify(config) %>"></c-app> - 组件内用
this.getAttribute('data-config')+JSON.parse()获取，别依赖window全局挂载——多实例或沙箱环境会冲突
Web Components 如何安全读取并响应全局配置变更
Web Components 无法监听 :root CSS 变量变化，也不能自动感知外部 JS 注入的配置对象。所谓“全局配置”，实际要拆成两层：样式变量走 CSS 自定义属性，逻辑参数走组件属性或事件通信。
比如主题色切换，靠 var(--theme-primary) 自动生效；但 API 地址、用户权限这类运行时参数，必须显式传递。
- 禁止在
connectedCallback里硬编码fetch('/api/user')—— 域名、token 应来自this.getAttribute('api-base')或父组件通过slot传入的上下文 - 如果配置可能动态更新（如用户切换语言），不要只读一次。监听
CustomEvent：window.addEventListener('app-config-change', e => this.updateFrom(e.detail)) - Shadow DOM 内部无法直接访问
document.documentElement.style.getPropertyValue('--api-timeout')，得先在 light DOM 注入一层桥接脚本，把变量转成 JS 可读形式
为什么 html-webpack-plugin 的 templateParameters 不能直接喂给 customElements.define()
因为 templateParameters 是构建时（build time）注入，而 customElements.define() 是运行时（runtime）执行。Webpack 打包完的 JS 文件里，templateParameters 的值早已固化为字符串，不会随浏览器环境变化。
典型翻车现场：new HtmlWebpackPlugin({ templateParameters: { env: process.env.NODE_ENV } }) → 模板里写 <my-button env="<%= env %>"></my-button> → 构建后永远显示 env="production"，哪怕你本地开发。
- 需要运行时配置（如域名、调试开关），必须通过 URL 参数、
<meta name="config">或服务端 SSR 注入 - 构建时配置适合静态元信息：标题、版本号、默认语言、CDN 域名（不随用户变）
- 若强行混用，容易出现“构建时值”覆盖“运行时值”的静默失效，尤其在 CI/CD 多环境部署时
如何避免配置注入后样式和行为不同步
最常被忽略的是：CSS 变量更新了，但组件内部 JS 还缓存着旧值；或者 JS 配置变了，但 var() 引用的样式没刷新。两者生命周期不同步，就会出现视觉与逻辑割裂。
比如深色模式开启后，按钮背景变黑，但点击态反馈仍用旧色值计算——因为 JS 里 getComputedStyle(this).backgroundColor 读到的是渲染后颜色，不是原始变量。
- 组件内所有依赖配置的逻辑，必须绑定到同一信号源：要么全走 CSS 变量（适合样式），要么全走 JS 属性（适合行为），别交叉混用
- 修改
:root变量后，如需强制重绘，调用getComputedStyle(document.documentElement).getPropertyValue('--theme-primary')触发回流 - 禁止在组件
constructor里读取document.documentElement—— 此时:root可能还没被主题 class 修改，应推迟到connectedCallback或requestIdleCallback
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
