在 React 中使用 Shadow DOM

1. Shadow DOM 是什么

Shadow DOM 是什么？我们先来打开 Chrome 的 DevTool，并在 'Settings -> Preferences -> Elements' 中把 ' Show user agent shadow DOM' 打上勾。然后，打开一个支持 HTML5 播放的视频网站。比如 Youtube：

可以看到 video 内部有一个 #shadow-root ，在 ShadowRoot 之下还能看到 div 这样的普通 HTML 标签。我们能知道 video 会有「播放/暂停按钮、进度条、视频时间显示、音量控制」等控件，那其实，就是由 ShadowRoot 中的这些子元素构成的。而我们最常用的 input 其实也附加了 Shadow DOM，比如，我们在 Chrome 中尝试给一个

---