Web元件允許您建立自定義HTML元素。您會發現在現代的前端JavaScript框架中使用最多的web元件。但是“Web元件”實際上是w3cweb標準，不需要框架就可以使用。

什麼是web元件(web components)？

Web元件的工作方式類似於Lego for HTML。它們是幫助HTML變得更有用和可重用的技術集合。有關更多背景資訊，請檢視w3web元件規範和Mozilla開發人員網路關於Web元件的頁面。

這些技術包括：

• 自定義元素
• HTML模板
• 影子王國
• ES模組

讓我們依次看看這些。

自定義元素

自定義元素是JavaScript使其更具功能性的特殊HTML元素。它們最好用於顯示總是最新的資料，而不需要回調。你也可以給他們起任何名字。

html模板

模板是可重用的HTML塊。它們非常適合放在多個地方或多個頁面上的專案，比如頁首、頁尾和選單。

影子王國

DOM是將瀏覽器中看到的內容繫結到HTML程式碼的粘合劑shadowdom是DOM的一部分，它使標記、樣式和功能保持分離。

透過使用shadowdom，每個自定義元素都可以獲得自己的DOM。這樣做可以防止樣式和JavaScript函式修改您不希望受到影響的元素。

es模組

這些是使web元件工作的特殊JavaScript庫。

web元件的一個主要優點是可以在任何地方重用自定義HTML。因為web元件是純HTML和JavaScript，所以它們與普通JavaScript應用程式以及框架相容。你可以在webcomponents.org網站.

具有框架的web元件

開始使用web元件的最簡單方法是使用框架。在web元件出現之前，角度.js提供了類似的功能，稱為指令。在元件成為標準之前，他們做了很多與元件相同的工作。

既然元件已經成為一種標準，那麼還有其他基於web元件概念的框架。它們使web元件的使用變得更簡單、更精簡，並將使用低級別JavaScript的許多複雜性抽象掉。

vue公司

虛擬使用者.js是一種流行的基於元件的前端框架，深受開發人員的喜愛。Vue易於學習和程式設計。該框架還可以方便地向基本的HTML網站新增簡單元件。

相關：什麼是Vue.js？

反應

React是一種被廣泛採用的前端框架。這個框架也是開發人員的最愛。React最為人所知的是透過將HTML、CSS和JavaScript放到一個指令碼中來簡化web開發。

要了解更多資訊，請看我們的學習如何**web應用教程綜述。

沒有框架的web元件

您可以用純JavaScript編寫web元件。但這很難做到，尤其是對於初學者。不過，有一些輕量級庫可以新增到現有程式碼中。它們使您能夠輕鬆地使用現代JavaScript實踐，而不需要整個框架的高開銷。

聚合物

聚合物是谷歌對網路元件運動的貢獻。它是一個輕量級庫的集合，使得建立自定義元素比使用普通JavaScript更容易。它有用於建立自定義元素和模板的庫。

Polymer有一個polyfill庫，以確保與舊瀏覽器相容。還有一個材料設計元件的早期版本，可以將材料設計新增到純HTML中。

苗條的

另一個選擇是斯利姆.js，一個一體化的庫，可以很容易地新增到一個簡單的網站。它簡化了自定義元素的建立過程，並提供了對shadowdom的直接訪問。

模板

最後但並非最不重要的是優秀的模具，它給你最好的兩個世界。它類似於React，提供了很多相同的功能。但它提供了框架級的功能，而不會將您鎖定在一個繁重的框架中。

模具還預編譯您的元件，這使他們更輕。相反，React之類的框架將整個框架載入到瀏覽器中，並動態編譯元件。當模具元件進入瀏覽器時，它們只是普通的JavaScript和HTML，沒有額外的負擔。

web元件與web設計

使用元件的主要障礙之一是設計框架的丟失，比如Bootstrap。從技術上講，您可以將Bootstrap與基於元件的網站結合使用。React有一個引導埠。但是，如果您想使用諸如Stencil或Vue之類的東西，您可能會對元件和框架之間缺乏相容**到不滿。

傳統網頁設計框架

好訊息是有幾種設計框架可供選擇。瓦丁提供了一些漂亮的元件。對於企業風格，有OpenUI5。如前所述，谷歌的聚合物也提供了材料介面元件。

壞訊息是，在這些框架中，您不會找到從載入程式獲得的相同體驗。它們缺少了很多你在大多數設計框架中看到的元素，比如排版。

什麼是基於元件的設計框架方法(the component-based design framework approach)？

不同的技術，如web元件，應該採用不同的方法。超光速子是最好的方法。它更容易為設計師使用，但它可以給開發商一個堅實和清潔的基礎。超光速粒子是移動第一，提供了一個微妙的設計一致性，但產生美麗的結果。

超光速子將CSS類分解到最小可能的用途。例如，以下是使用按鈕建立按鈕的方式：

在大多數設計框架中，您會給連結一個按鈕類和另一個圓角類。在超光速粒子中，你可以快速地選擇填充、邊框、顏色等。所有的縮寫一開始可能看起來很複雜，但它們遵循一個易於學習的一致命名模式。

最小的類是一種不適用於傳統網站的方法，因為它會阻塞HTML類。但對於基於元件的架構，您可能會在整個應用程式中反覆使用相同的按鈕。這意味著你只需要為整個網站建立一次按鈕。

元件思維

另一個障礙是讓你的大腦從傳統的網站佈局轉向基於元件的結構。有兩種技巧可以幫助你學會在元件中思考。

原子方法

把網頁想象成一個有機體。像英雄部分、價格指南和使用者評論這樣的部分就像有機體的細胞。無論是否重用，這些部件都可以安全地移動到它們自己的元件中。

按鈕、標題和引號就像原子。原子是可能最小的部分。當進一步分解一個元件沒有意義時，那就是一個原子。這些通常是您在整個專案中以及可能在專案之間反覆使用的元件。

幹法

或者你可以忘記所有的有機體、細胞和原子的無稽之談，讓它保持乾燥。DRY代表不要重複你自己。

任何東西，無論大小，都可以是一個元件。所以就照常寫你的HTML吧。當你找到一些你想重用的東西時，比如相簿或者頁尾，把它分解成它自己的元件。

您應該在下一個專案中使用web元件嗎？

要考慮的要點是您的團隊和web標準。

所有主流瀏覽器都採用了web元件。CanIUse對自定義元件的採用率為93%，模板的採用率為95%，因此它們是安全的。還有一些不支援web元件的散亂程式的polyfill。這意味著合規性不是問題。

如果您的團隊沒有框架或JavaScript方面的經驗，他們可能很難採用這種新技術。但如果真是這樣的話，他們很可能很難採用任**技術。如果你一個人，就去吧！提高你的技能總是個好主意。

採用web元件最困難的部分是缺乏設計框架和學會用元件來思考。但我們已經涵蓋了這兩個方面。Web元件從2014年就出現了，所以它們不是一種新技術。但它們是一種更好的技術。