阅读背景:

6-5 css样式隔离

来源:互联网 

css modules
webpack在这里插入图片描述

shadow dom

<div id="box1"></div> <div id="box2"></div> <script> const box1 = document.getElementById('box1') // 开启shadow dom模式 const shadow1 = box1.attachShadow({ mode: 'open'}) const one = document.createElement('div') one.className = 'one' one.innerText = '第一个内容' const style1 = document.createElement('style') style1.textContent = ` .one{ color: red; } ` shadow1.appendChild(one) shadow1.appendChild(style1) const box2 = document.getElementById('box2') const shadow2 = box2.attachShadow({ mode: 'open'}) const two = document.createElement('div') two.className = 'one' two.innerText = '第一个内容' const style2 = document.createElement('style') style2.textContent = ` .one{ color: blue; } ` shadow2.appendChild(two) shadow2.appendChild(style2) </script> <div id="box1"></div



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: