Shadow DOM 是浏览器原生的 DOM 封装机制，通过 attachShadow 创建独立子树实现样式局部化与 DOM 隔离；支持天然隔离、::slotted() 穿透和 :host 控制，继承属性与全局样式仍可透入，open 模式下 JS 可访问但样式封装由浏览器保障。
Shadow DOM 是浏览器原生支持的一种 DOM 封装机制，它让组件的结构、样式和行为与主文档（light DOM）相互隔离，实现真正意义上的“样式局部化”和“DOM 隔离”。它不是 JavaScript 的语法特性，而是 Web Components 规范的一部分，通过 JavaScript API 创建和操作。
Shadow DOM 的核心：独立的 DOM 子树
调用 element.attachShadow({ mode: 'open' }) 后，该元素就拥有了一个 shadow root，它是一个独立的 DOM 根节点。所有追加到 shadow root 中的 HTML 结构（比如 div、style、slot）都只在这个子树内生效，外部 CSS 选中器默认无法穿透进来，内部样式也不会泄露出去。
例如：
const host = document.querySelector('#my-card');const shadow = host.attachShadow({ mode: 'open' });shadow.innerHTML = ` h2 { color: #2c3e50; margin: 0; } .content { font-size: 14px; } 用户卡片
`;
这段 只作用于 shadow 内部的 h2 和 .content，不会影响页面其他地方的同名标签或类名。
立即学习“Java免费学习笔记（深入）”；
样式封装的三种关键方式
天然隔离：普通 CSS 选择器（如 .btn、div p）在 shadow root 外写，不会匹配 shadow 内元素；反过来，shadow 内的样式也不会影响 light DOM。 ::slotted() 有限穿透：只能用于选择被 投影进来的外部节点，且仅支持简单选择器（不能带后代/子代组合器），例如 ::slotted(.title) 可以给传入 slot 的
加样式，但 ::slotted(div .title) 无效。 :host 和 :host-context 提供宿主控制：:host 匹配 shadow 宿主元素自身（即调用 attachShadow 的那个元素），:host(.active) 表示只有宿主有 active 类时才生效；:host-context(body.dark) 则可响应外部上下文（如整个页面切暗色主题）。
注意边界：哪些情况会打破封装？
封装不是绝对的“铁壁”：
CSS 继承属性仍会透入：比如 color、font-family、line-height 等可继承属性，若 shadow 内没显式设置，会从宿主元素继承 —— 这是设计使然，方便主题统一。 全局样式（如 @font-face、@keyframes）依然有效：它们作用于整个 document，shadow 内可直接使用定义好的字体或动画名。 JavaScript 仍可跨边界访问：如果 shadow root 是 open 模式，外部可通过 host.shadowRoot 拿到并操作内部节点（所以逻辑封装要靠自觉，样式封装才靠机制）。
基本上就这些。Shadow DOM 的样式封装不依赖构建工具或 BEM 命名，是浏览器级保障，适合构建高复用、低冲突的 UI 组件。
以上就是javascript的shadow dom是什么_它如何封装样式？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542263.html
微信扫一扫 
支付宝扫一扫 
