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