要改變component的樣式為什麼不是用v-deep

前言

在與前同事隨意尬聊的狀況下，前團是提出要我幫他看code的需求，他說他一直無法改變component的樣式，我想說不過就是v-deep的麽簡單的事情，所以想也不想就答應了，殊不知最終我搞了兩個小時的故事....

問題起源於他使用了套件vue-advanced-chat來製作聊天視窗，正確來說是前同事使用，所以他也只是背鍋而已。然後公司需求很多，然後這套件很多功能其實都無法達成需求。這故事告訴我們，選元件要慎選，如果客製化需求太多，自己造輪子不一定是不好，至少彈性足夠。

接下來要說說這次遇到什麼問題，就是audio的樣式在某種解析度會跑版，需要用css去修正，但無論用v-deep或是global寫css，死活都是吃不到，正一籌莫展之際，我看到了幾個關鍵字。

首先第一個為什麼這個套件的tag還可以保持原樣<vue-advanced-chat>，然後在tag下面出現#shadow-root(open)的字樣，下面可以展開，上次我看到類似的景樣是在iframe裡面，如果這狀況跟iframe真的是類似，那確實css selector無法吃到裡面也很正常。我上網查了關鍵字發現確實是類似的情況shadow dom，簡單說被web component包裝成一個原生tag了。

我原本想說有了關鍵字剩下就簡單了，所以去查要怎麼樣才能讓shadow dom吃到css，查了半天都說有:host之類的選擇器可以用，但每個都是過了一樣沒有效果，但看到這網站說明後才大致明瞭這東西必須在寫web component當時，也就是內部撰寫，所以也還是沒辦法達成我要的效果，且裡面也明確表示css是無法從外層直接影響內層的樣式。

正當我想放棄時我想到，既然css無法做到，能否使用javascript去強制修改呢？結果還真讓我找到解法，要分成兩個步驟來說，首先你要可以選擇到shadow dom，做法也不難，就是你要在選擇到web component之後，直接.shadowRoot就可以選到dom，之後再創造一個style並把內容寫好寫滿，之後appendChild進去就好，我們直接來看code

// 寫一個可以選擇到shadow dome的selector

const querySelectorAll = (node,selector) => {

const nodes = [...node.querySelectorAll(selector)],

nodeIterator = document.createNodeIterator(node, Node.ELEMENT_NODE);

let currentNode;

while (currentNode = nodeIterator.nextNode()) {

if(currentNode.shadowRoot) {

nodes.push(...querySelectorAll(currentNode.shadowRoot,selector));

}

}

return nodes;

}

// inject css

const style = createElement("style")

style.innerHTML = `

.class { ...... }

......

`

document.querySelector("custom-web-component").shadowRoot.appendChild(style)

這樣就大功告成拉。

後記

我就說好好的vue component為什麼要包成web component，應該是考量到要讓各種框架使用，然後你包沒有關係，為什麼要包成shadow dom，然後你包成shadow dom沒有關係，為什麼還要有bug！！好在大爺我幾十歲了，不怕你！雖然已經一點多了，下班