HTML5ShadowDOM插槽详解教程
本文深入解析HTML5原生Shadow DOM中的``机制，澄清其并非模板占位符或框架语法糖，而是专用于自定义元素内容分发的核心功能；强调必须通过`customElements.define()`注册组件并调用`attachShadow()`才能启用，详细剖析了匿名与具名slot的匹配规则、`slotchange`事件的正确监听时机、`assignedNodes({ flatten: true })`的实用技巧、样式隔离边界及兼容性处理要点，并指出slot的能力边界——它专注内容投递而非逻辑复用，真正需要动态渲染时应转向属性传函数等更合适的方案。
slot 是什么，不是什么
它不是模板引擎的占位符，也不是 Vue 的 v-slot 语法糖。HTML5 的 slot 是原生 Shadow DOM 内容分发（content distribution）机制，只在自定义元素启用了 Shadow DOM 时起作用。没调用 attachShadow()，写再多
常见错误现象： 关键在两层匹配：外部传入的节点，要能被 Shadow DOM 内的 实操建议： 正文 它只在 slot 分发内容**发生变化后触发**，不是页面加载时自动触发。如果你在 正确做法： Shadow DOM 的样式隔离是单向的：组件内 Uncaught DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support shadow roots，说明你试图给 这类非自治元素挂载 Shadow DOM；必须用 customElements.define() 注册的自定义标签，比如 怎么让 slot 正确接收外部内容
name 的 标题
和 就变成孙节点，不会进匿名 slot，name 值必须完全一致（区分大小写）slotchange 事件怎么监听才不漏掉
connectedCallback 里立刻查 assignedNodes()，很可能拿到空数组——因为此时外部 HTML 还没解析完，内容尚未分发进来。slotchange 事件，而不是依赖初始化时机：shadowRoot.querySelector('slot').addEventListener('slotchange', () => { ... })assignedNodes({ flatten: true }) 才能拿到所有最终分发进来的节点（包括跨多层 slot 的）；不加 flatten: true 只返回直系分配节点，容易误判为空slotchange，需降级用 MutationObserver 监听 slot 元素的 childList 变化scoped 样式和 slot 内容样式冲突怎么办
