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

Question

我正在从MDN阅读this关于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');
div.id="the host"
let shadow = div.attachShadow({mode: 'open'});

console.log(shadow.host)
console.log(shadow.constructor.name)

Answer 2

这样想：如果我们指向影子主机的第一个节点，则将该节点称为影子根