Web Components

shadow DOM

用chrome查看shadow-dom, 先设置 settings -> Show user agent shadow DOM

<video> 下面 有 #shadow-root , #shadow-root 下面即 shadow-dom,即 <video>的具体实现。每个shadow-dom元素都有 pseudo 属性。
用pseudo元素选择器 :: 控制shadow-dom样式，video::-webkit-media-controls-panel{}
创建 shadow-dom 
// 宿主元素称为 shadow host
var host = $('#id')[0]
// 创建 shadow root
var root = host.createShadowRoot();
// 添加 shadow dom
$(root).append('<div/>');