今天要寫文章時才注意到，原來昨天的文章有少一段，今天補回來。

直接存取Shadow DOM內部節點的方法

雖然shadow DOM內部的節點不會出現在外部的DOM。但還是有一些方法可以獲取內部的DOM。

shadowRoot

在前二天的文章中，建立shadow DOM 的文章中有提到要使用attachShadow方法。

class MyComponent extends HTMLElement {
    root = null
    constructor() {
        super();
        this.root = this.attachShadow({mode: 'open'});
        this.root.appendChild(this.render())
    }
}

其中，如果參數是使用** mode: 'open'的話，就可以使用'shadowRoot'這個屬性來獲得shadow DOM、進而存取web component內部的節點；參數是使用 mode: 'closed'**的話'shadowRoot'這個屬性就會回傳null。

建議參數不要使用** mode: 'closed'**，讓web compoent只能逶過shadowRoot獲得shadow DOM就己經有一定的封閉性了，不需要使用closed來自找麻煩。

slot

前面的文章有提到slot這個HTML element，這個元素有二個好用的地方，其一是可以簡單的把web component的子節點可以顯示在shadow DOM中的特定位置；其二是因為web component的子節點不在shadow DOM之中，所以外部的DOM可以簡單的存取子節點的內容，從而間接的控制shadow DOM內部的節點。

<my-com id="my-com" card-content="ha! you~">
    <div  slot="slot1" id="child-div">333</div>
</my-com>

const divNode = document.getElementById('child-div'); //子節點可以正常的獲取
divNode.innerHTML = '444' 
//子節點可以正常的修改內容，而且因為有設定slot，shadow DOM中 slot的對應的部分也會一起修改