web component解決了那些問題

HTML既有元素的問題

如果各位曾經有上過網頁基礎的課程或看過介紹網頁基礎的書籍，或多或少都會有這個概念：HTML元素是網頁的骨架，CSS是網頁的外觀，JavaScript是幫助使用者和網頁互動。以上的概念幾乎是完全正確，但對一些HTML元素來說就不是這樣了。比方說select標籤或是input標籤，修改這些元素的外觀或是追加功能就是一場惡夢。

web componet沒辦法修改select或是input這些HTML內建標籤的外觀或是行為，能作的只是建立一個新的標籤，但會比較容易維護（因為可以一看就知道有在那裡使用web component）

CSS全域問題

CSS的全域問題是網頁技術的古老問題，考慮到CSS都出現3.0都還沒有解決，我想大約以後也不會有解決的那一天吧。這也相應的產生了各種設計模式（oocss、BEM、ACSS等）。

web component沒辦法解決CSS全域問題，但至少可以保證web component 內外的CSS不會互相影響。

Javascript和DOM問題

document.getElementsByClassName或是document.getElementById之類的方法基本上都是寫JS的起手式(除非使用jquery)。但隨著程式愈寫愈多，效能或是程式碼的正確性也會下降。
CSS的全域問題是網頁技術的古老問題，考慮到CSS都出現3.0都還沒有解決，我想大約以後也不會有解決的那一天吧。這也相應的產生了各種設計模式（oocss、BEM、ACSS等）。

web component可以分開內外DOM，不用擔心改到不該改的部分。

框架的反璞歸真

想當初jquery的出現，是為了可以簡單的弭平瀏覽器間不同語法的差異。但隨著AngularJS的出現，更多的框架和附隨的函式庫也一個個的跑出來。相較於學也學不完的函式庫，web component有時可以更簡單的達成目標。

不同框架間的共用程式碼

網頁技術常常出現新的框架，光是主流或曾經是主流的框架就有Jquery、Angular、React和Vue,後三個框架還曾經出現大改版。如果需要一個客製化的影片播放功能，面對這堆不同的框架和版本，使用純JavaScript建構的web component會是首選。

web component的問題

web component這項技術得以實現，javascript這個程式語言和web API這個在各瀏覽器中都有實做的API缺一不可。所以在缺少其中一個的場合，web component就不能使用了。

缺少javascript的場合

對現代人來說，打開網頁的目的己經不只有觀看網頁的內容了，和網站互動也是很重要的一環。所以己經很少有人會特別在瀏覽器禁用javascript了。要說可能會缺少javascript的場合，幾乎只有搜尋引擎的爬蟲了吧。

缺少web API的場合

相比缺少javascript的場合，缺少web API的場合還比較容易碰到。因為web API只有在瀏覽器中才能使用，如果是要做SSR或靜態網頁的場合。沒辦去在後端建構的web component會影響SEO的分數。

這幾年己經有Declarative Shadow DOM這個功能被提出了，我想後端沒辦法使用web component的問題也許在不久的未來就能解決了。

Shadow是優點也是缺點

如同上面對Shadow DOM的說明，Shadow DOM可以隔內外的CSS或DOM，這是好事，也是壞事。如果真的要從外部設定內部的CSS或獲取內部的DOM時，Shadow DOM技術就是問題了。比方說使用最近流行的CSS庫Tailwind。