Shadow DOM 可以想象成我们在 Vue 或者 React 中使用的一个个组件,是一种将 HTML 结构、Style 封装起来的结构。我们熟悉的 <video> 标签,其实就是 Shadow DOM 的封装。

借用 MDN 上的图,可以看到 Shadow DOM 允许我们在 DOM 文档中插入一个 DOM 的子树。Shadow Tree 会挂在 Shadow host 对应的 DOM 上。之后,Shadow DOM 与外层 DOM 不会相互影响,因此可以放心用来做组件。

具体的例子可以参考 MDN 给出的案例<popup-info-box>

这个例子告诉我们可以利用 Shadow DOM 封装自己的 tag 标签,并且可以在网页中使用。

参考文章:
使用 shadow DOM

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

弱小和无知不是生存的障碍,傲慢才是。