scoped 样式是什么，为什么覆盖不到组件内部？
先理解原理和示例，再练习完整口述与追问。
回答要点
scoped 通常通过编译增加属性选择器限制样式范围，不是浏览器 Shadow DOM。样式影响与 DOM 结构、子组件根节点等相关；深度选择器语法要按 vue-loader / 编译器版本确认。
原理拆解
Vue 单文件组件 scoped 样式通常通过给选择器和渲染元素加入作用域标记来缩小匹配范围，属于编译期约束，不是 Shadow DOM。父 scoped 样式可以影响子组件根节点的布局，但对子内部深层节点不能默认穿透。第三方组件内部结构和 Teleport 等 DOM 位置变化，还会影响选择器是否匹配。
示例与推演
父级 .dialog .title[data-v-parent] 无法匹配只带子作用域标记的内部 title。需要覆盖时，优先用组件提供的 class、样式变量或主题 API；确需深度选择器时，按 vue-loader 与预处理器版本选用支持的写法，并限定业务容器，避免全站覆盖。动态 v-html 插入的内容也不会自然带上所有编译期标记。
易错点
scoped 不会隔离 JavaScript 状态，也不阻止继承的字体、颜色和全局样式影响。不要把 Vue3 的 :deep() 支持范围不加核实地套入所有旧 Vue2 构建链。
参考回答可直接练习口述
scoped 是编译期样式隔离：给节点及选择器加标识，限制样式匹配范围，并不创建 Shadow DOM。父 scoped 样式可影响子组件根节点，但不代表随意覆盖子组件所有内部节点。覆盖第三方组件时优先用其样式接口，再使用当前编译器支持的深度选择器和局部业务类，避免全局污染。
面试官可能继续问追问与完整解答展开收起
追问
第三方弹窗挂到 body 后为什么不继承预期样式？如何避免深度选择器污染无关组件？
追问回答
Teleport 或第三方弹窗挂到 body 后，不再位于原祖先 DOM 下，依赖祖先选择器或继承的样式可能失效；应给弹窗内容设置明确业务类并在实际挂载位置匹配。深度选择器要限制在特定业务根和组件范围内；Vue2 老项目的 >>>、/deep/、::v-deep 支持随预处理器与 loader 变化。