HTML 原生 slot 仅支持内容投影，无作用域插槽；Vue 的 v-slot 通过编译和运行时注入实现数据穿透，二者能力不同且不可混用。
slot 在 HTML 原生 Web Components 中没有“作用域插槽”这个概念——那是 Vue 的扩展设计，HTML 标准里 slot 只负责内容分发，不传递数据。
HTML 中的 slot 只做一件事：内容投影
原生 slot 是 Web Components 规范的一部分，运行在 Shadow DOM 内，它只接收父级传入的节点并插入到指定位置。它不支持绑定子组件内部数据，也不解析 v-slot、scope 或 slot-scope 这类 Vue 专属语法。
- 父元素写在自定义元素标签内的内容，会被浏览器自动收集为
assignedNodes()结果 -
name属性用于匹配具名插槽，无name即默认插槽 - 后备内容（fallback）只在没内容可投递时渲染，例如
<slot><p>缺省文案</p></slot> - 不能访问宿主元素内部状态，比如无法把
this.count传给 slot 内容
Vue 的 slot 是对原生机制的语义增强
Vue 把原生 slot 的“占位+投递”逻辑保留下来，但用编译时处理 + 运行时上下文注入，实现了数据穿透。关键区别在于：
- Vue 的
<slot>标签最终会被编译成渲染函数调用，不是直接映射到原生slot元素 -
v-slot:xxx="scope"中的scope对象由子组件通过slotProps显式提供，例如<slot name="item" :item="row" :index="i"></slot> - Vue 2 用
slot-scope，Vue 3 统一为v-slot，但底层都不依赖原生 Shadow DOM - 即使不用
shadowRoot，Vue 也能模拟插槽行为，所以它能在普通 DOM 组件中工作
混用 HTML slot 和 Vue slot 容易踩的坑
当你在 Vue 组件里同时使用原生 Web Components 和 Vue 插槽时，容易误以为两者能力一致：
立即学习“前端免费学习笔记（深入）”；
- 在自定义元素内部写
<slot name="header"></slot>，然后在 Vue 父组件用<template #header>...—— 这会失效，因为原生slot不识别v-slot - 试图在原生
<slot>上绑定:data="xxx"，浏览器直接忽略，Vue 也不会接管 - 把 Vue 组件当作 Web Component 使用（如
defineCustomElement），其内部v-slot会退化为普通属性，除非你手动桥接exposeSlots逻辑 - SSR 场景下，原生
slot的内容分发发生在客户端，而 Vue 插槽在服务端已预计算好，渲染结果可能不一致
真正需要“作用域”能力时，必须用 Vue 的 v-slot；仅需结构复用、无数据交互时，原生 slot 更轻量。别指望浏览器原生实现 scope，那是框架层的事。
