时间戳

首页 > 解决方案 > Web 组件 - 影子主机和影子根有什么区别？

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

问题描述

我正在阅读这篇关于 MDN 的 Web 组件的文章。

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

标签： html

解决方案

这很简单只要想想这些词的意思

主持人：某物（房子）容纳了其他东西（人），可以说房子在容纳人。

在 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)

推荐阅读