Web Components介紹（一）
在前端快速發(fā)展的今天，組件貫徹著我們開發(fā)的方方面面湿酸，不管是針對業(yè)務封裝的業(yè)務組件，還是項目中依賴的第三方基礎 UI 組件（Ant Design菩掏、Element鲫竞、Vuetify...），亦或是依賴的前端框架（Angular铲觉、Vue澈蝙、React...），它們都貫徹著「組件化」的概念撵幽。
[組件化]開發(fā)已然成為前端主流開發(fā)方式灯荧，現(xiàn)在流行的 Vue、React盐杂、Angular等框架都是組件框架逗载。[組件化]在代碼復用、提升效率方面存在巨大優(yōu)勢链烈，因此厉斟，可以認為：組件化是前端發(fā)展的未來。
1.什么是Web Components?
Web Components是一套不同的技術强衡。
可以通過它創(chuàng)建可重用的自定義元素擦秽，并在Web應用中使用這些元素。Web Components是一個瀏覽器原生支持的組件化方案，允許創(chuàng)建新的自定義感挥、可封裝的HTML標簽缩搅，在使用時，不需要加載任何額外的模塊触幼，不需要依賴任何第三方框架硼瓣，可以跨現(xiàn)代瀏覽器工作，并可與任何支持 HTML 的 JavaScript 庫或框架一起使用置谦。
簡單理解： Web Components 是一套技術巨双，允許創(chuàng)建可重用的自定義元素。
Web Components目的很明確霉祸，從原生層面實現(xiàn)組件化，使開發(fā)者開發(fā)袱蜡、復用丝蹭、擴展自定義組件，實現(xiàn)自定義標簽坪蚁。
Web Components意味著前端開發(fā)人員開發(fā)組件時可以實現(xiàn) Write once, run anywhere奔穿。
2.如何使用Web Components？
這里演示定義一個Hello World組件敏晤，網(wǎng)頁只要插入下面代碼贱田，就會在頁面顯示Hello World組件
<hello-world></hello-world>
完整代碼，test-01.html
<!DOCTYPE html>
<html>
<head><title>test-01</title></head>
<body>
<h4>test-01</h4>
<!-- 這里使用自定義的web components -->
<hello-world></hello-world>
<!-- 自定義web components視圖樣式 -->
<template id="testTemplate01">
<style>
#title {
color: red;
}
</style>
<span id="title">Hello Web Components !</span>
</template>
<script>
// web components定義 需要繼承HTMLElement類
class HelloWorld extends HTMLElement {
constructor() {
super();
// 獲取頁面上的template
const template = document.querySelector('#testTemplate01');
// 克隆節(jié)點嘴脾，防止該組件被多處使用時男摧，修改了一處，其他地方也跟著變化
// 參數(shù)true表示遞歸克隆子元素
const content = template.content.cloneNode(true);
this.appendChild(content);
}
}
window.onload = () => {
// 注冊web components
window.customElements.define('hello-world', HelloWorld);
};
</script>
</body>
</html>
使用瀏覽器打開test-01.html译打，頁面展示如下
上面示例定義了一個簡單的Hello World組件耗拓，使用過Vue的同學會覺得上面的寫法似曾相識，但它并沒有使用第三方框架奏司，完全使用瀏覽器原生API完成乔询。
相較于Vue、React韵洋、Angular 等框架定義的組件竿刁，web components擴展性更好，不會因為Vue2.x變更到Vue3.x導致組件不能使用搪缨。
對上面的API做一些說明：
-
<template>標簽<template>標簽用于定義web components的內容和樣式食拜，<template>包裹的元素不會立即渲染，只有在內容有效的時候勉吻，才會解析渲染监婶，具有這個屬性后，我們可以在自定義標簽中按需添加我們需要的模板，并在自定義標簽渲染的時候再去解析我們的模板惑惶，這樣做可以在 HTML 有頻繁更改更新任務煮盼，或者重寫標記的時候非常有用。 -
customElements.define()函數(shù)自定義元素需要使用 JavaScript 定義一個類带污，并且繼承HTMLElement僵控，這樣一來，自定義元素便繼承了HTML元素的特性鱼冀，然后使用瀏覽器原生的
customElements.define()函數(shù)报破，告訴瀏覽器<hello-world>標簽與自定義類關聯(lián)window.customElements.define('hello-world', HelloWorld);
更多API說明可以到官網(wǎng)查閱Web Components API
3.Web Components如何應用于生產(chǎn)？
上面的示例只是一個簡單的演示千绪，如果要應用于生產(chǎn)還有許多額外的知識需要進行學習充易，例如綁定事件，使用插槽荸型，動態(tài)數(shù)據(jù)綁定等盹靴。
不過，大部分情況下我們并不需要使用原生API創(chuàng)建Web Components瑞妇，因為代碼量相對較大稿静，市面上已經(jīng)出現(xiàn)了很多庫，可以更加輕松的使用和構建Web Components辕狰。
Polymer ：Google推出的Web Components庫改备，支持數(shù)據(jù)的單向和雙向綁定，兼容性較好蔓倍，跨瀏覽器性能也較好悬钳；提供了一組用于創(chuàng)建 custom elements 的功能。這些功能旨在使custom elements 像標準 DOM 元素一樣工作更容易和更快柬脸。
X-Tag： 是微軟推出的開源庫他去，支持Web Components規(guī)范，兼容Web Components API倒堕。
Stencil： 是一個用于構建可重用灾测、可擴展的設計系統(tǒng)的工具鏈。生成可在每個瀏覽器中運行的小型垦巴、極快且100%基于標準的Web Components媳搪。
hybrids： 是一個 JavaScript UI 框架，用于創(chuàng)建功能齊全的 Web 應用程序骤宣、組件庫或具有獨特的混合聲明性和功能性架構的單個Web Components秦爆。
LitElement： 是一個簡單的基類，用于使用lit-html創(chuàng)建快速憔披、輕量級的Web Components等限。
[Polymer] start最多(21.9k)爸吮，而且有大廠支持，是一個不錯的選擇望门。
下一篇文檔將演示如何使用[Polymer]創(chuàng)建Web Components
4.前端發(fā)展方向
Web Components已經(jīng)被很多大廠直接或者間接地用于實踐形娇，比如：Twitter、YouTube筹误、Electronic Arts桐早、Adobe Spectrum等。
有些同學可能會產(chǎn)生疑問厨剪，現(xiàn)在的前端框架不是挺好的嗎哄酝？為什么還需要Web Components?
最大的原因在于Web Components是建立在Web標準之上。
雖然現(xiàn)在許多前端框架組件都很不錯祷膳，用起來也很方便陶衅，但它們只在自己的生態(tài)系統(tǒng)中很不錯。但你不能（輕松）在 React 中使用 Angular 組件直晨，也不能（輕松）在 React 中使用 Vue 組件万哪。而Web Components 建立在Web標準之上，它可以在所有生態(tài)系統(tǒng)中工作抡秆，這是第三方框架無法比擬的優(yōu)勢。
最后吟策，如果說組件化是前端的未來儒士，那么Web Components便是組件化的未來
