核心在于将symbol定义内联注入Shadow Root以解决use元素跨边界引用失效问题，需禁用vite-plugin-svg-icons自动注入、动态解析SVG提取symbol、首次渲染时批量挂载defs到shadowRoot，并通过显式fill和em单位控制样式与尺寸。
SVG图形组件化设计中，利用Shadow DOM封装矢量图标，核心在于隔离样式、避免全局污染，并确保图标在微前端或Web Components环境中稳定渲染。这不是简单把<svg>塞进shadowRoot，而是要解决符号引用（<use>）、CSS作用域、DOM注入时机和跨上下文ID可见性等实际问题。
Shadow DOM下<use>失效的根源
SVG的<use>元素依赖外部<symbol>定义，而这些定义通常注入在<body>或<head>中。当组件启用Shadow DOM后，其内部无法访问宿主文档的<defs>或<symbol>——因为Shadow DOM是样式与DOM边界隔离的封闭环境。
- 浏览器不会跨Shadow边界解析
xlink:href或href指向的#id - 即使
<symbol>已注册在全局<svg>中，Shadow内的<use>仍查不到该ID - 常见报错：「Failed to execute 'querySelector' on 'Document': '#icon-home' is not a valid selector」
可行的封装方案：内联Symbol + 动态注入
绕过跨边界引用限制，最可靠的方式是把<symbol>定义直接注入到Shadow Root内部，让<use>能就近查找。这需要在组件初始化时完成，且避免重复注入。
- 在组件
setup()中读取SVG原始字符串（例如通过import raw from '!raw-loader!@/assets/icons/home.svg'） - 提取
<svg>内的<symbol>或整个<defs>块 - 用
shadowRoot.appendChild()将<defs>挂载到Shadow DOM根节点 - 后续所有
<use href="#icon-home">即可正常解析
兼容Vite插件的适配改造
若项目已使用vite-plugin-svg-icons，默认生成的全局注册逻辑不适用于Shadow DOM。需关闭自动注入（inject: 'none'），改由组件自行管理符号注册。
- 配置
vite.config.ts时设inject: false，禁用body-last脚本插入 - 在Icon组件中，通过
import.meta.glob动态加载SVG文件内容 - 对每个图标，解析XML并提取
<symbol id="icon-home">部分 - 首次渲染时批量注入到当前Shadow Root的
<defs>中（仅一次）
样式隔离与尺寸控制技巧
Shadow DOM天然隔离CSS，但SVG图标的fill、stroke等属性默认继承自宿主上下文。需主动透传或重置。
- 组件Props暴露
color、size，并在Shadow内用:host或svg选择器绑定style - 避免依赖
currentColor——它在Shadow中可能无法穿透继承链，改用显式fill="var(--icon-color, #333)" - 设置
width/height为1em，配合font-size控制缩放，保持响应式一致性
不复杂但容易忽略。关键不在“能不能放进Shadow DOM”，而在“怎么让<use>在封闭环境里依然能找到它的<symbol>”。
