关于web-components:Web-Components2-使用shadow-dom

1. 为什么用 shadow dom

应用 shadom dom 能够让组件与其余组件、组件与 dom 树进行隔离，实现封装。

如 MDN 中所写：

Web components 的一个重要属性是封装——能够将标记构造、款式和行为暗藏起来，并与页面上的其余代码相隔离，保障不同的局部不会混在一起，可使代码更加洁净、整洁。

每一个 shadow dom 都是一个独立的、暗藏的 dom 树，附加在了一个元素上。

2. 在 custom element 中应用 shadow dom

接第一篇末的代码

class CommentCard extends HTMLElement{constructor(){super();

        // 将 shadow dom 附加在自定义元素中        
        let shadow = this.attachShadow({mode: 'open'});

        let templateEle = document.getElementById('commentCardTemplate');
        let content = templateEle.content.cloneNode(true);
        
        content.querySelector('img').src = this.dataset.avatar;
        content.querySelector('.nickname').innerHTML = this.dataset.nickname;

        // 向 shadow dom 中追加元素
        shadow.appendChild(content);
    }
}

Element.attachShadow承受一个配置对象作为参数，它蕴含一个属性 mode。
当 mode 设置为 open 时，则能够从内部流动并操作 shadow dom。
当 mode 设置为 closed 时，内部将无法访问到 shadow dom。

一般来说，我认为没有必要将 mode 设置为closed。即便在 custom elements 类定义的外部，咱们也无奈对 shadow dom 进行操作。这将影响咱们对 custom elements 的灵活处理，比方款式操作、事件绑定等。这样太不不便了。

3. 操作 shadow dom

通过 Element.shadowRoot 能够获取 shadow dom 的根结点。
其它操作与惯例 DOM 操作统一。
比方给某个元素增加事件绑定。

class CommentCard extends HTMLElement{constructor(){super();

        let shadow = this.attachShadow({mode: 'open'});

        let templateEle = document.getElementById('commentCardTemplate');
        let content = templateEle.content.cloneNode(true);
        
        // 向 shadow dom 中追加元素
        shadow.appendChild(content);

        this.shadowRoot.querySelector('.nickname').addEventListener('click', (e) => {this._showBubble(e.target);
        })
    }
    
    ...
}