javascript - 需要帮助理解 Shadow DOM

Question

阅读有关 Shadow DOM 的文章和教程时，我遇到了一个让我有点困惑的描述:

“Shadow DOM 是指浏览器将 DOM 元素的子树包含到文档呈现中的能力，但不包括到主文档 DOM 树中。”

所以 Shadow 树不是 DOM 树的一部分？但是浏览器仍然会看到它并呈现它的内容？

Answer 1

我认为理解 shadow DOM 最简单的方法是通过示例:

<div>
  <input type="range">
</div>

您的上述代码的 DOM 将完全符合您的预期:

div
- input[type=range]

但是您的浏览器呈现的是其他东西:有一条水平线和一个拇指(或旋钮或任何您称之为的东西)。所以在内部，input 有一些子元素，但它们没有通过 DOM 公开:

div
- input[range]
  - bar
  - thumb

但是正如我已经写过的:那些没有通过 DOM 公开，所以它们对你、你的 CSS、你的 JS 是隐藏的(这不完全正确，浏览器可以给你一些访问权限，例如基于 Webkit 的浏览器允许您可以通过 -webkit-slider-thumb 伪元素在 CSS 中操纵缩略图的外观。

另一方面，这些元素需要在 DOM 中的某处才能被浏览器渲染，这就是影子 DOM 的用武之地:在内部，浏览器替换了 input[type=range] 在树的 DOM 中

input[range]
- bar
- thumb

这就是影子 DOM:某些元素是某些元素的子元素，不是因为您将它们放在 HTML 中，而是因为父元素被定义为具有这些子元素(例如音频元素被定义为具有播放按钮)，它们不会通过 DOM 公开，而是由浏览器在内部生成。

可以在此处找到更多示例和更详尽的解释:What the Heck is Shadow DOM?