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/>');