摘要：隨著頁面中相同或類似的增加，使得代碼冗余度增加，的重用性問題日益彰顯。影子使得這些與主文檔的保持分離。分離的原因是如果復(fù)雜頁面沒有很好的組織結(jié)構(gòu)，樣式容易覆蓋。

早期在我們構(gòu)建web頁面時，基本上都是通過組合HTML提供的標(biāo)簽來實現(xiàn)的，再簡單點我們還可以拷貝黏貼bootstrap的css代碼。隨著頁面中相同或類似UI的增加，使得代碼冗余度增加，UI的重用性問題日益彰顯。

盡管像angular這樣的框架可以解決組件標(biāo)簽化重用的問題，但是框架間的組件重用顯得無能為力了。

這時 Web Components 的概念就出現(xiàn)了。

它是一系列web平臺APIs（瀏覽器提供），允許你創(chuàng)建自定義的，可重用的，封裝的HTML標(biāo)簽。簡單點說就是一系列接口規(guī)則，希望瀏覽器們可以提供給開發(fā)者，但是由于瀏覽器政治存在，進(jìn)度是緩慢的。

既然需要瀏覽器來實現(xiàn)，也就需要規(guī)范，Web Components有四個規(guī)范（其中最重要的就是自定義元素和影子DOM）：

自定義一些新的HTML標(biāo)簽，聲明其行為和樣式。可以分為兩類：自定義標(biāo)簽和自定義內(nèi)置元素。

為Web Components中的DOM和CSS提供封裝。影子DOM使得這些與主文檔的DOM保持分離。分離的原因是如果復(fù)雜頁面沒有很好的CSS組織結(jié)構(gòu)，樣式容易覆蓋。

支持