关于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);
        })
    }
    
    ...
}