先分享一个常见误区：在页面中写了 slot 是 Shadow DOM 的投影机制，将其放在普通 DOM 中完全不会生效，会被浏览器视作无意义的标签直接忽略。
slot 标签必须配合 attachShadow 才能生效
要让 slot 真正工作起来，以下三个条件缺一不可：
- 自定义元素的构造函数中必须调用
this.attachShadow({ mode: 'open' })，这一步是创建影子 DOM 根节点的必要条件。 - 影子 DOM 内部（shadowRoot）的 HTML 必须包含对应的
- 该自定义元素必须通过
customElements.define()正式注册并完成升级，即 DOM 中的标签必须真正“激活”。
一个极易踩坑的写法：在普通
外部内容必须是直系子节点，隔层即失效
接下来这个要点，是许多开发者频繁碰壁的地方：slot 匹配只识别“直接子节点”，中间但凡多一层包裹元素，就会静默失效。更令人困扰的是——浏览器既不会报错，也不会给出任何警告。
举个例子，以下写法可以成功匹配：
Hello
但下面的写法完全无效：
Hello
原因很简单： 是直系子节点，而 只是它的后代，slot 不会穿透到后代中去匹配。这意味着组件使用者必须严格按照约定结构传入内容，组件作者也无法通过 CSS 或者 JS 来“修复”这类嵌套问题。
具名插槽 name 属性需严格字符串匹配
当使用 slot="footer" 的节点，大小写、空格、引号类型都必须完全一致。
常见陷阱包括：
slot=" Footer "（带首尾空格）—— 不匹配，空格会被当作字符串的一部分。slot='footer'（单引号）—— 可以，HTML 属性值使用单引号或双引号不影响解析。slot="footer-2"对比
如需验证内容是否成功分发，可用 slot.assignedNodes() 方法检查返回的 NodeList。如果得到空数组，说明未匹配上，需回头检查名字或嵌套层级。
占位符提取建议用 matchAll 配合正确正则
如果模板中使用了 {{name}} 这类占位语法，想要提取所有变量名，千万不要用 String.prototype.match()——它只返回第一个匹配项，在实际项目中远远不够。
推荐写法如下：
for (const match of htmlTemplate.matchAll(/{{(\w+)}}/g)) {
console.log(match[1]); // 输出 'name', 'user', 'a vatar' 等
}
有几个细节需要特别留意：
- 正则末尾必须添加
g标志，否则matchAll会直接报错。 - 如果占位符支持点号路径（如
{{user.profile.name}}），正则需改为/{{([\w.]+)}}/g。 - 避免匹配到 HTML 注释或属性值中的类似字符串。必要时先对模板做预处理，剥离注释内容。
实际项目中真正的难点往往不在于写正则本身，而在于确保模板格式统一、没有嵌套干扰。一旦模板混用了 {{}} 和 ${} 两种语法，很容易导致漏提取或错提取。
