考察点：Web Components、样式隔离、封装
Shadow DOM 是 Web Components 的核心技术之一。它允许我们将一个隐藏的、独立的 DOM 树附加到一个元素上。
解决的问题：
- 样式隔离：Shadow DOM 内部的样式不会影响外部，外部的样式也不会渗透进内部（除非使用
::part或 CSS 变量）。这解决了大型项目中 CSS 全局污染的问题。 - DOM 封装：Shadow DOM 内部的节点在常规的
document.querySelector中是不可见的，实现了真正的封装。
应用场景：
最常见的例子是 <video> 或 <input type="range"> 控件。浏览器内部就是用 Shadow DOM 实现的播放按钮、进度条等，我们无法直接用 CSS 选择器选中它们内部的细节，因为它们被隔离了。
在开发自定义组件（Custom Elements）时，我们会创建 Shadow Root，将组件的模板挂载进去，从而保证组件在任何环境下都能保持一致的表现和样式，不受宿主页面影响。这是构建高复用、高健壮性前端组件库的关键技术。