HTML原生scoped属性已废弃，所有现代浏览器均忽略，无任何样式隔离效果；其被W3C标记为obsolete，不创建DOM边界、不重写选择器、不干预CSS作用域，纯属无效属性。
HTML 原生 scoped 属性根本不起作用
它在所有现代浏览器中都被忽略——Chrome、Firefox（69+）、Safari、Edge 全部不识别 scoped，也不做任何样式隔离。W3C 已将其标记为 obsolete，HTML 标准里已删除该特性。你写 <style scoped>，浏览器解析时直接跳过这个属性，样式照常全局生效。DevTools 里查 document.querySelector('style').hasAttribute('scoped') 返回 true，但 document.querySelector('style').scoped 是 undefined，说明属性存在，能力不存在。
scoped 不是 Shadow DOM，也不创建真实作用域边界
它既不生成 shadowRoot，也不阻止外部样式穿透，更不隔离内部样式外泄。真正的样式作用域需要 DOM 边界（如 Shadow DOM）或构建时干预（如 CSS Modules）。而 scoped 连选择器重写都不做——它只是个被废弃的 HTML 属性，没有任何运行时逻辑。有人误以为“Vue 的 <style scoped> 是靠它实现的”，其实 Vue 完全是自己在编译阶段注入 data-v-xxx 属性并重写选择器，和原生 scoped 毫无关系。
伪类、v-html、@media、全局重置都会绕过所谓“隔离”
即使你在 Vue 里用 <style scoped>，以下情况照样失效：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
* { box-sizing: border-box }这类通配规则仍会命中组件内所有元素 -
:hover、::before等伪类选择器会被重写，但:is()、:where()等新语法支持不一致 -
v-html插入的内容不带data-v-xxx属性，样式完全不受控 -
@media或@supports块内的选择器，需手动逐层加属性前缀，工具链难以全覆盖 - SSR 场景下，服务端与客户端哈希不一致，hydration 直接失败
真正可控的局部样式方案只有三类
别再幻想加个属性就自动隔离：
立即学习“前端免费学习笔记（深入）”；
- 构建时处理：用
CSS Modules（React/Vite）或 Vue 的<style module>，靠哈希类名保证唯一性 - 运行时封装：用
element.attachShadow({mode: 'open'})创建 Shadow DOM，<style>必须注入其中才生效 - 约定式隔离：BEM 命名 + 唯一容器 class（如
<div class="card-widget">），所有样式写成.card-widget h1
最容易被忽略的是：scoped 对 <slot> 内容完全无效——子组件传进来的节点，样式由父组件决定，连 ::slotted() 都没有。
