在 shadow dom 中安全引入外部全局 css 样式库的最佳做法是使用 @import 规则配合 scoped 属性，或者通过 javascript 动态加载并应用 :host 作用域。直接引入未处理的全局样式会因样式穿透导致不可控的副作用，而使用 @import 可以在 shadow root 内部隔离样式，确保只有当前组件受其影响。
如何避免全局样式污染 Shadow DOM？
要避免全局样式污染，必须将外部样式表限制在 Shadow Root 的作用域内。这可以通过在 Shadow DOM 的 <style></style> 标签中使用 @import 来实现，这样导入的样式只会作用于该 Shadow Tree 内部的元素，不会泄漏到 Light DOM，也不会被 Light DOM 的样式意外覆盖。
const shadow = document.createElement('div').attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = `@import url('https://example.com/global.css');`;
shadow.appendChild(style);
// 此时 global.css 中的样式仅对 shadow 内部有效
如何处理第三方库的特定选择器冲突？
当第三方库使用通用选择器（如 * { margin: 0 }）时，可能会破坏组件布局。解决此问题的方法是利用 :host 伪类或为 Shadow Root 添加特定的类名前缀，并通过 @import 引入后，在后续样式中重置或覆盖这些全局规则。这样可以确保即使外部库有宽泛的选择器，也能在当前组件上下文中保持可控。
立即学习“前端免费学习笔记（深入）”；
const shadow = document.createElement('div').attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = `
@import url('https://example.com/global.css');
:host * { margin: initial; padding: initial; }
`;
shadow.appendChild(style);
如果外部样式库包含 !important 怎么办？
如果外部样式库中包含 !important，它会强制覆盖 Shadow DOM 内的默认样式。为了安全应对这种情况，开发者应在 Shadow Root 内部定义更高优先级的样式，或者使用 :host-context() 来增强选择器的特异性。此外，可以考虑在加载外部样式前检查其内容，或通过构建工具预处理样式文件，移除或替换危险的 !important 声明。
