Web 组件 - 影子主机和影子根之间有什么区别？

Question

我正在阅读MDN 上有关 Web 组件的文章。

在查看了 DOM 影子术语及其图表后，我想知道影子主机和影子根有何不同。它们最终不是图中的同一个节点吗？

Answer 1

这很简单只要想想这句话的意思就可以了

主持人：某个东西（房子）容纳着其他东西（人），你可以说房子正在接待人。

在 Web 组件上下文中，host意味着您将阴影附加到的元素。

let div = document.createElement('div');
let shadow = div.attachShadow({mode: 'open'});

该attachShadow函数返回一个DocumentFragment ^ref ，它是我们的影子根，而 div 是影子元素的宿主。

演示

let div = document.createElement('div');
let shadow = div.attachShadow({mode: 'open'});