原文地址：

Shadow DOM 的诞生是为了解决样式冲突和选择器失效的问题。它类似于一种新的 DOM 节点，或者说它可以封装了 HTML，可以用于封装一些小的组件，比如一个表单提交，我们可以创建一个 shadow 然后独立的完整的呈现一个表单组件，而它不受外界影响。

创建一个 shadow dom 使用 Element.attachShadow()

    
     
Default text
    
    复制代码

样式问题

// shadowRoot 为创建的 shadow dom 元素shadowRoot.innerHTML = `    
Shadow DOM
    `    // 或者这样shadowRoot.innerHTML = `  
Shadow DOM
  
    `  // 然后我们是可以通过 给 shadow dom 元素设置样式通过继承去影响 shadow dom 里面的元素样式的shadowRoot.innerHTML = `    
Shadow DOM
    `// 这样通过样式继承，p 标签的内容颜色也是红色的// 可以通过 #root { all: initial; } 解决复制代码

自定义标签也可以用 shadow dom

    复制代码

事件触发问题

    
 复制代码

shadow dom v0 是谷歌浏览器的规范，现在是 v1 版本，火狐和谷歌都有版本全面支持了，苹果的嘛就只是部分支持，巨硬家的就还没支持这个特性，就目前来说哈。

shadow dom 是 Web Components 的三个主要技术之一。