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年就出现了，所以它们不是一种新技术。但它们是一种更好的技术。