Shadow DOM 为Web组件中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。

可以在settings -> preferences -> show user agent shadow DOM处进行勾选

从而在element内显示Shadow DOM, 比如input内的div:

自定义webcomponent:

1
2
3
4
5
6
7
8
9
10
11
const myElement = document.createElement('my-element')
//为元素挂载Shadow DOM
//mode: 一个指定Shadow DOM封装模式的字符串，可以是下列之一：
//  open 指定为开放的封装模式。
//  closed 指定为关闭的封装模式。
const shadow = myElement.attachShadow({ mode: 'user-agent' });
//然后往shadow内添加文字
shadow.innerHTML = '<div>这是一个shadow dom</div>'
//添加颜色
shadow.innerHTML += '<style> div{ color:red; border: 1px solid blue; width: 15vw; } </style>'
document.querySelector('body').appendChild(myElement)

效果如下: