在 React 中使用 Shadow DOM

  1. 云栖社区>
  2. 博客>
  3. 正文

在 React 中使用 Shadow DOM

houfeng 2019-09-10 10:24:09 浏览467
展开阅读全文

1. Shadow DOM 是什么

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

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


网友评论

登录后评论
0/500
评论
houfeng
+ 关注