通过shadow dom，可以将子树渲染到另一颗树里。 隔离css, 选择性隔离html显示，实现dom封装。与template不同的是， shadow dom其实渲染了， 但是template没有渲染。
<body><div id="foo">hahaha</div></body>
document.querySelector('#foo').attachshadow({mode: 'open'}).innerHTML('<div><slot></slot></div>'); 最终slot会被替换成hahaha， 结果是<body><div id="foo"><div>hahaha</div></div></body>
插槽内容将会被替换。 也可以给插槽名字
<div><p slot="foo"></p></div>
document.querySelector('#foo').attachshadow({mode: 'open'}).innerHTML('<div><slot name="foo"></slot></div>'); 通过这样写的p元素其实还在body->div里面， 这个只是投射。
因为隔离里， 所以shadow dom里面的css会被隔离。里面的元素也不会被query到， 在dom里面是一个#shadom-host这样的document。
可是时间会被冒泡出去。
书中的例子：
for（let color of ['red', 'green', 'yellow']）{
const divElment = document.createElement('div');
divElement.innerText = `mak eme ${color}`;
divElmenet.attachShadow({mode: open}).innerHTML = `<p><slot></slot></p>`;
<Style>p{color: ${color}}<style>
}
这就是为什么<input type="range"/>里面有拖拽， 可是getElementsByTagName('input')[0].firstChild为空， 因为通过shadom dom隔离了， 样式可以通过伪元素控制。
这也是微前端框架隔离的思路， qiankun.com