HTML中data-*属性必须写在组件容器上，JS需在构造函数中通过this.dataset读取并存为实例属性，再注入Shadow DOM，不能在Shadow DOM内直接querySelector，否则因隔离机制返回null。
直接把配置信息塞进 HTML 模板里，不等于它真能被组件用上——多数失败源于混淆了“模板渲染时”和“组件运行时”两个阶段，导致 data-* 属性写对了、但 JS 没读，或 JS 读到了、但 Shadow DOM 内部拿不到。
template 中的配置必须可被 JS 实时读取
HTML 模板本身不执行逻辑，data- 属性只是静态标记。组件要拿到配置，得靠 JS 在合适时机主动提取。
-
data-theme="dark"、data-api-url="/v1/products"这类属性必须加在组件容器上（如<product-card data-theme="dark"></product-card>），不能只写在 template 内部的占位元素里 - 若用
<template>标签定义结构，需确保 JS 克隆后仍保留外层容器的dataset，常见错误是tmpl.content.cloneNode(true)只克隆内部节点，丢掉了父容器的属性 - 推荐写法：先取宿主元素的
this.dataset，再传入 shadowRoot 渲染逻辑，而不是让 shadow 内部再去 querySelector 找 data-* —— 隔离后根本查不到
Shadow DOM 内无法直接访问外部 data-* 属性
Shadow DOM 的样式和 DOM 是隔离的，this.dataset 在 custom element 构造函数里可用，但一旦内容 append 到 shadowRoot，内部节点就不再继承外部属性。
- 错误做法：在 shadow 内写
document.querySelector('[data-theme]')—— 返回 null - 正确做法：构造时读取
this.dataset，存为实例属性（如this.theme = this.dataset.theme || 'light'），再在 render 方法中注入到 shadow 内部结构 - 如果组件支持动态更新配置（如响应
attributeChangedCallback），需监听data-*对应的 attribute（注意：dataset 键名会转为 kebab-case，data-api-url对应 attribute 名是data-api-url，不是dataApiUrl）
html-webpack-plugin 注入的变量 ≠ 组件可读配置
Webpack 模板变量（如 <%= htmlWebpackPlugin.options.title %>）只在构建时替换，生成的是纯 HTML 字符串，运行时无法被 JS 动态修改或响应。
立即学习“前端免费学习笔记（深入）”；
- 它适合静态元信息（title、description），不适合需要交互或 API 调用的配置项
- 若需运行时配置，应在 HTML 中预留
<script>块，把配置对象挂到全局（如window.__APP_CONFIG__ = { apiBase: '/api' }），再由组件读取 - 更安全的做法是用
<meta name="app-config" content='{"apiBase":"/api"}'>，JS 用document.querySelector('meta[name="app-config"]').getAttribute('content')解析，避免污染全局作用域
真正全链路的关键不在模板怎么写，而在 JS 怎么桥接：从 HTML 属性 → Custom Element 实例属性 → Shadow DOM 渲染上下文 → 异步请求参数，每一步都得显式传递，没有自动穿透。漏掉任意一环，配置就断在半路。
