标签自定义组件下的文章 - a博客-个人博客-技术分享

Shadow DOM：Web 组件的封装与控制

介绍Shadow DOM 是 Web 组件规范的一部分，它允许将封装的“影子” DOM 树附加到常规 DOM 树中的元素。影子 DOM 封装了 DOM 和样式，使开发人员可以控制这些元素，而不会与页面上的其他代码或样式发生冲突。术语影子宿主（Shadow host）：影子 DOM 附加到的常规 DOM 节点。影子树（Shadow tree）：影子 DOM 内部的 DOM 树。影子边界（Shadow boundary）：影子 DOM 终止，常规 DOM 开始的地方。影子根（Shadow root）：影子树的根节点。创建 Shadow DOMconst host = document.querySelector('#host') // 创建一个 Shandow DOM 元素 const shadow = host.attachShadow({mode: 'open'}) const span = document.createElement('span') span.textContent = 'Hello World' // 向 Shadow DOM 元素内填充内容 shadow.a

技术 · 06-23

Shadow DOM：Web 组件的封装与控制

Theme Jasmine by Kent Liao