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

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

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

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

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

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

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

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

支持