shadow dom是什么

Shadow DOM：我们知道Vue和react有组件概念，可以通过普通标签封装复合需求的组件，shadow dom就是浏览器支持可以通过普通的标签，封装新的自定义标签元素。

我们写个例子

html:
        <el-label class="shadow-dom">
            <label>这是不支持shadow dom</label>
        </el-label>

JS:
(function(){
    const el = document.querySelector('el-label');
    let root = el.attachShadow({mode:'open'});
    root.innerHTML = `<label style="background-color: #2cacff; color: white;">这是支持shadow-dom的标题~</label>`;
})();

效果图：

1-1.png