6-5 css样式隔离

1. css modules
   webpack

2. 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>

4. minicss