shadow dom 是唯一真正隔离样式的原生方案，html 模板（）本身无作用域，必须配合 attachshadow({ mode: 'closed' }) 创建封闭 shadow root 并将克隆内容注入其中，才能切断样式穿透与 dom 查询链。
Shadow DOM 是唯一真正隔离样式的方案
HTML 模板本身（<template></template>）不提供样式隔离能力，它只是惰性容器。真正实现样式自动隔离，必须配合 Shadow DOM 使用。不挂载到 Shadow Root 的模板，所有 CSS 仍走全局作用域，哪怕用了 <style></style> 标签也会污染外部或被外部覆盖。
常见错误是把 <template></template> 当成“作用域封装单元”，结果发现子组件的 .button 覆盖了页面其他地方的同名类——因为根本没启用 Shadow DOM。
- 必须用
element.attachShadow({ mode: 'closed' })或'open'创建 Shadow Root -
<template></template>内容需用shadowRoot.appendChild(template.content.cloneNode(true))注入，不能直接 innerHTML -
<style></style>必须写在 Shadow Root 内（例如放在<template></template>里，再一起 append），不能靠外部 link 或 style 标签注入
使用 scoped 属性时，本质是属性选择器模拟隔离
Vue 单文件组件里的 <style scoped></style>、或 Svelte 的默认行为，并非真隔离，而是构建工具（如 Vue Loader、Svelte Compiler）在编译时给元素加唯一属性（如 data-v-f3f3eg9），再重写 CSS 选择器为 .button[data-v-f3f3eg9]。这依赖构建流程，纯 HTML 环境下无效。
如果你在没有构建工具的静态页中手动写 <style scoped></style>，浏览器会忽略该属性，样式照常全局生效。
- 仅适用于支持对应框架编译器的环境，不是标准 HTML 行为
- 无法隔离
@keyframes、@font-face和全局伪类（如:focus-visible） - 父子组件深度选择器（如
div :deep(.icon)）需额外语法，且不同框架写法不同
CSS 自定义属性（--var）能辅助隔离，但不替代作用域
自定义属性本身不带作用域，但它可被 Shadow DOM 继承链控制：Shadow Root 内未声明的 --color 会向上继承，而内部声明的则只影响其后代。合理利用这点，可以避免硬编码颜色/间距，减少样式冲突概率。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
注意：它不能阻止 .card { width: 100% } 这类直接样式穿透，只是让变量值可控。
- 在 Shadow Root 根节点上设
style="--primary: #007bff"，内部组件用color: var(--primary) - 避免在全局 CSS 中大量声明同名自定义属性，否则 Shadow 内部可能意外继承错误值
- 调试时用浏览器开发者工具检查 computed styles，确认
var()解析来源是 shadow host 还是 document root
第三方组件嵌入时，iframe 是最彻底的隔离兜底方案
当目标环境不支持 Shadow DOM（如老版本 IE）、或需完全禁止脚本/样式逃逸（例如嵌入广告、用户生成内容），iframe 是唯一可靠选择。它拥有独立文档、样式表、JS 执行上下文和 CSSOM。
缺点明显：DOM 不互通、事件传递需 postMessage、滚动/尺寸同步麻烦。别为了“看起来干净”就滥用 iframe。
- 设置
sandbox="allow-scripts allow-same-origin"需谨慎，allow-same-origin会削弱隔离效果 - 用
<iframe srcdoc="<html><body><style>...</style></body></html>"></iframe>可免发请求，但内容长度受限制（约 2MB） - 父页面无法直接 querySelector iframe 内元素，必须通过
iframe.contentDocument（同源）或 postMessage（跨源）通信
Shadow DOM 的边界是清晰的，但很多人误以为只要用了 <template></template> 就安全；实际漏掉 attachShadow 这一步，等于没锁门却以为上了保险。真正隔离，从来不是模板的事，是 DOM 树结构的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
