html - 什么是影根

标签 html google-chrome dom google-chrome-devtools

在 Google Chrome 的开发者工具中,我看到一个 #shadow-root就在 <html lang="en"> 下标签。它有什么作用以及它的用途是什么?我在 Firefox 和 IE 中都没有看到它;只有在 Chrome 中,这是一项特殊功能吗?

如果我打开它,它会显示 <head><body>和一个名为 reveal 的链接,通过单击,它指向 <head><body> , 没有别的。

最佳答案

这是一个特殊的指示器,表示 Shadow DOM存在。这些已经存在多年,但直到最近才向开发人员提供 API。 Chrome 已经有这个功能一段时间了,其他浏览器仍在迎头 catch 。它可以在“元素”部分下的 DevTools 设置中切换。取消选中“显示用户代理 Shadow DOM”。这至少会隐藏内部创建的任何 Shadow DOM(例如选择元素)。我不确定它是否会影响用户创建的元素,例如自定义元素。

这些也出现在 iframe 之类的东西中,你有一个单独的 DOM 树嵌套在另一个树中。

Shadow DOM 只是说页面的某些部分在其中有其自己的 DOM。样式和脚本可以限定在该元素内,因此在其中运行的内容仅在该边界内执行。

这是 Web Components 所需的主要部分之一去工作。这是一项新技术,允许开发人员构建自己的封装组件,开发人员可以像使用任何其他 HTML 元素一样使用这些组件。

关于html - 什么是影根,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34119639/

相关文章:

javascript - 为什么 onsubmit 不起作用,如果我在控制台中调用它运行的函数?

javascript - 如何通过 jQuery 获取字段集中选定的单选按钮值?

javascript - 在 chrome 86 中检测自定义协议(protocol)处理程序

html - 响应式设计无法使用 chrome 开发工具,但浏览器可以

javascript - 在元素的实例上附加函数

javascript - 如何在 HTML 表格中显示此 XML 数据?

javascript - 将 2 个支付按钮居中并水平对齐

javascript - 最低元素层的jquery悬停

javascript - 将项目添加到 DOM 时的 Chrome 滚动行为

javascript - 如何保存/缓存 dom,以便当您点击后退按钮时页面按原样加载?