Vue插槽机制实现Markdown组件样式解耦：通过具名插槽暴露标题、代码块等节点及上下文数据，作用域插槽传递结构化属性，默认插槽配合样式隔离兜底，避免硬编码CSS或重复解析。
插槽（Slot）是 Vue 中实现内容分发的核心机制，它让 Markdown 渲染组件既能保持语义化解析能力，又能灵活支持用户自定义样式——关键不在“替换渲染器”，而在于把样式控制权交还给使用者。
用具名插槽接管特定 Markdown 元素
不要试图在 Markdown 解析层硬编码 CSS 类名。正确做法是：解析器识别出标题、代码块、链接等节点后，通过具名插槽暴露出来。例如：
- 为
<h2>节点预留<slot name="heading-2"></slot>，并在组件内部传入原始文本和层级信息 - 为
<pre><code>预留<slot name="code-block"></slot>，同时透传语言类型（如lang="js"）和高亮后的 HTML 字符串 - 使用者即可在父组件中这样写：
<MarkdownRenderer :source="md">
<template #heading-2="{ text, level }">
<h2 class="my-h2-style" :data-level="level">{{ text }}</h2>
</template>
<template #code-block="{ code, lang }">
<div class="code-wrapper">
<div class="code-header">{{ lang }}</div>
<pre><code v-html="code"></code></pre>
</div>
</template>
</MarkdownRenderer>
作用域插槽传递上下文与可操作数据
仅传文本不够，样式常依赖上下文。比如链接是否应新窗口打开、图片是否需懒加载、表格是否要加斑马纹。这时需在插槽中暴露结构化数据：
<slot name="link" :href="node.href" :title="node.title" :is-external="isExternal(node.href)"><slot name="image" :src="node.src" :alt="node.alt" :loading="'lazy'">- 使用者可据此决定是否添加
target="_blank"、rel="noopener"，或动态绑定class控制尺寸/圆角/阴影
默认插槽兜底 + 样式隔离策略
对未被具名插槽覆盖的普通段落、强调、列表项，使用默认插槽统一处理，并配合 CSS Scoped 或 CSS Modules 避免污染：
- 组件根元素加
class="markdown-body"，所有默认内容包裹在该容器内 - 在组件样式中写
.markdown-body p { line-height: 1.7; margin: 1em 0; }，不依赖全局重置 - 若需深度定制（如修改
blockquote的边框颜色），仍建议提供blockquote插槽而非开放 CSS 变量——变量难以覆盖嵌套结构，插槽才真正可控
避免常见误区
不是所有样式都适合用插槽解决：
- 纯视觉微调（如文字颜色、字体大小）优先用 CSS 自定义属性（
--md-text-color）+:deep()，比写一堆空插槽更轻量 - 不要在插槽里重复解析 Markdown（如在
#code-block插槽里再调用highlight.js），渲染逻辑应由组件内部完成并透传结果 - 插槽命名需语义清晰（
thematic-break比hr更准确，因 Markdown 中***不等价于 HTML<hr>）
