不会冲突。slot的作用域限于当前组件的shadow dom或模板内，同名插槽（如name="header"）在不同组件中完全独立；关键在于遵循统一的语义化命名契约（如title、body、footer），而非共享代码，确保跨组件接口一致且封装独立。
多个组件共用同一套 slot 名称，会不会冲突？
不会冲突。slot 的作用域只在当前组件的 Shadow DOM 或模板范围内，name="header" 在 MyModal 里和在 MyCard 里是两套完全独立的插槽机制，互不影响。关键不是“共用 slot 名”，而是“共用 slot 设计契约”——即约定一套语义化命名（如 title、body、footer），让不同组件对外暴露一致的内容入口。
如何统一 slot 接口但保持组件独立封装？
靠抽象层 + 命名规范，而不是共享代码文件。每个组件仍各自声明自己的 <slot name="..."></slot>，但遵循同一份设计文档：
- 所有模态类组件（
MyModal、MyAlert、MyConfirm）都必须支持title、body、footer三个具名 slot - 所有卡片类组件（
MyCard、MyPanel）统一用header、default（主体）、actions - slot 名大小写、拼写、是否带连字符（如
main-contentvsmainContent）必须严格一致，Vue 和 Web Components 都区分大小写
这样使用者写一次 <template>...</template>，就能套用到多个组件，不用反复查文档。
Web Components 中复用 slot 布局结构，怎么避免重复写 template？
不能直接复用 <slot></slot> 标签本身，但可以复用包含 slot 的基础模板片段。推荐两种轻量方式：
- 用
<template id="shared-modal-layout"></template>定义通用结构，在各 Custom Element 的connectedCallback中克隆插入，再 attach 到 shadowRoot - 抽一个基类（如
BaseModal），在getTemplate()方法里返回含 slot 的字符串或 DocumentFragment，子类继承并调用super.getTemplate() - 注意：不要试图用
<slot></slot>嵌套另一个<slot></slot>—— 浏览器不识别嵌套 slot，只会把内层当作静态文本渲染
Vue 里多个组件共用 slot 名，父组件怎么避免写一堆 template？
用 v-slot 的解构语法 + 统一插槽数据对象，减少模板冗余：
<mymodal v-bind="sharedSlots"></mymodal><myalert v-bind="sharedSlots"></myalert><myconfirm v-bind="sharedSlots"></myconfirm><script setup>
const sharedSlots = {
'title': () => h('h2', '操作提示'),
'body': () => h('p', '请确认该操作'),
'footer': () => h('div', [
h('button', { onClick: hide }, '取消'),
h('button', { onClick: confirm }, '确定')
])
}
</script>
这种写法把 slot 内容变成可复用的函数，比重复写 <template>...</template> 更紧凑；但要注意：函数返回值必须是 VNode，不能是字符串或普通 HTML 字符串。
真正容易被忽略的是 slot 的“语义一致性”——比如 footer 在模态框里是按钮组，在卡片里可能是元信息区域，如果强行共用同一套 slot 名却承载不同交互意图，反而会误导使用者。契约比代码更难维护。
