插槽不生成分隔符，而是作为可替换DOM节点传入真实内容；它适用于组件化框架（如Vue/React），提供语义性、可访问性和交互能力，但不替代CSS伪元素或变量控制机制。
插槽（slot）本身不直接生成分隔符，它不参与 CSS 伪元素渲染逻辑，也不替代 ::before 或 ::after 的内容注入机制。想用插槽实现自定义分隔符，核心是“把分隔符作为可替换的内容节点传入”，而不是靠插槽控制样式或伪元素。这在 Vue、React 等支持组件化结构的框架中更自然，在纯 HTML/CSS 场景下则不适用。
插槽方式适用于组件封装场景
当面包屑是一个自定义组件（如 <Breadcrumb>）时，可通过具名插槽或作用域插槽把分隔符作为独立节点插入，例如：
- 在 Vue 中使用
<template #separator><i class="icon-arrow"></i></template>，让父组件决定渲染什么 - 在 React 中通过
separator={<ChevronRightIcon />}属性传入 JSX 元素，组件内部用 {separator} 渲染 - 分隔符节点天然具备语义和可访问性控制能力，比如可加
aria-hidden="true"，避免屏幕阅读器重复读出符号
与伪元素方案的关键区别
插槽插入的是真实 DOM 节点，而 ::before 是虚拟层；这意味着：
- 插槽内容能响应事件、接受 focus、参与 tab 键导航（需合理设置
tabindex） - 它不受高对比度模式对
color或background的强制覆盖影响——因为它是真实元素，样式可完整继承 - 但会增加 DOM 节点数，若大量使用且未做优化，可能轻微影响渲染性能
- 不能像
content: "\2192"那样零请求、零字体依赖地渲染 Unicode 符号
如何兼顾灵活性与可访问性
真正实用的做法是“插槽 + 语义降级”组合：
- 默认提供简洁符号（如
>）作为 fallback 文本，包裹在<span aria-hidden="true">内 - 插槽内容作为增强层，仅在父组件显式传入时才渲染；未传入时自动回退到文本分隔符
- 对图标类分隔符，统一设
focusable="false"和role="presentation"，防止键盘导航卡住 - 移动端小屏下，可借助
@media (max-width: 480px)把插槽内容设为display: none，只保留紧凑文本符号
不推荐强行用插槽替代 CSS 变量
Bootstrap 5+ 原生支持 --bs-breadcrumb-divider，一行 CSS 即可全局生效。若项目已用 Bootstrap，优先用该变量而非封装插槽组件——除非你需要每个面包屑实例用不同分隔符（比如首页用 |，二级页用 ›）。此时插槽才有不可替代的价值。
