2019 年 I/O 大会上的 Web 组件
在 2019 年 Google I/O 大会上，Polymer 项目的 Kevin Schaaf 和 Salesforce 的 Caridy Patiño 都谈到了网络组件的状态。
网络组件有多受欢迎？
如果您今天使用过 Web，那么您可能使用过 Web 组件。根据我们的计数，目前有 5% 到 8% 的网页加载使用一个或多个网络组件。这使得网络组件成为过去五年中推出的最成功的网络平台功能之一。
您可以在您可能日常使用的网站（例如 YouTube 和 GitHub）上找到网络组件。组件还用于许多使用 AMP 构建的新闻和出版网站，AMP 组件也是网络组件。许多企业也在采用网络组件。
什么是网络组件？
那么，什么是网络组件呢？网络组件规范提供了一组低级 API，可让您扩展浏览器的内置 HTML 标记集。Web 组件提供以下功能：
- 用于创建组件的常用方法（使用标准 DOM API）。
- 接收和发送数据的一种常见方式（使用属性/事件）。
在该标准接口之外，这些标准并未说明组件的实际实现方式：
- 用于创建 DOM 的渲染引擎。
- 它如何根据属性或特性的更改进行自我更新。
换言之，网络组件会告知浏览器何时以及创建组件的位置，但不会告知创建方法。
作者可以选择像 React 一样的功能渲染模式来构建其 Web 组件，也可以使用声明式模板（就像在 Angular 或 Vue 中可能遇到的那样）。作为作者，您可以自由选择在组件内使用的技术，同时仍保持互操作性。
网络组件有何用途？
Web 组件与专有组件系统之间的主要区别在于互操作性。由于 Web 组件的标准界面，您可以在任何需要使用内置元素（如 <input> 或 <video>）的地方使用网络组件。
由于它们可以表示为真实的 HTML，因此可以由所有常用框架呈现。因此，您的组件可以在更加多样化的应用中使用，而无需将用户局限于任何一种框架中。
而且，由于组件接口是标准的，因此使用不同的库实现的网络组件可以混合到同一页面中。这些信息有助于在更新技术栈时确保应用能适应未来变化。您可以一次更新一个组件，而无需在框架之间发生巨大步骤变化（也就是更换所有组件）。
谁在使用网络组件？
因此，基于所有这些原因，Web 组件实际上在各种不同的应用场景中都取得了巨大成功。目前有三种特别流行的应用场景：内容网站、设计系统和企业应用。
展示广告网络网站
网络组件是用来逐渐增强内容的完美技术，因为网络组件已经可以作为标准 HTML 输出，并且无数 CMS 系统。
AMP 很好地展示了 Web 组件如何快速、轻松地插入到发布行业的基础架构中以提供内容。
设计系统
越来越多的公司选择使用设计系统来统一展示自我的方式，设计系统是定义组织网站和应用的常见外观和风格的一组组件和指南。网络组件非常适合这种情况。
通常，设计人员需要与许多团队面对挑战，即基于 React、Angular 和所有其他框架构建他们自己的设计系统组件版本，而不能仅采用一组规范组件。
答案就是 Web 组件 - 真正只需编写一次、随处运行的组件系统，同时仍允许应用团队自由使用他们选择的框架
ING、EA 和 Google 等公司正将其公司的设计语言用于网络组件。
企业：Salesforce 中的网络组件
作为一种安全、面向未来的技术，网络组件在企业内部也取得了长足的标准化发展。Salesforce 界面平台架构师 Caridy Patiño 介绍了他们使用网络组件构建界面平台的原因。
Salesforce 包含一系列应用，其中许多应用都来自于收购。其中每一项服务都可以在自己的技术栈上运行。由于它们是基于不同的堆栈构建而成，因此很难赋予它们相同的外观和风格。此外，Salesforce 可让客户利用 Salesforce 平台构建自己的自定义应用程序。因此，理想情况下，这些组件也应可供外部开发者使用。
Salesforce 从其平台的客户那里发现了一系列需求：
- 是标准解决方案，而不是专有解决方案，这样可以更轻松地找到经验丰富的开发者，并更快地培养新开发者。
- 一种常见的组件模型，因此自定义任何 Salesforce 应用程序的方式都相同。
他们还确定了客户不希望使用的一些功能：
- 对组件和应用所做的重大更改。也就是说，向后兼容性必不可少。
- 受制于旧技术，无法发展。
- 困在围墙花园里。
使用 Web 组件作为新界面平台的基础可以满足所有这些需求，最终催生了新的 Lightning Web 组件。
网络组件使用入门
开始使用网络组件有很多好方法。
如果您要构建 Web 应用，不妨考虑使用诸多现成的 Web 组件中的一些。以下是几个示例：
- Google 以网络组件的形式提供自己的 Material Design 系统：Material Web 组件。
- 有线元素是一组很酷的网页组件，具有粗略的手绘外观。
- 有一些非常棒的特殊用途 Web 组件，例如
<model-viewer>，您可以将其拖放到任何应用中，以添加 3D 内容。
如果您正在为公司开发设计系统，或者您出售的单个组件或库希望在任何环境中都可用，不妨考虑使用网络组件编写组件。您可以使用内置网络组件 API，但它们的级别较低，因此有许多库可以简化该过程。
若要开始构建自己的组件，您可以试试 LitElement，这是一个由 Google 开发的 Web 组件基类，具有与 React 类似的出色功能渲染体验。
可以考虑的其他工具和库：
- Stencil 是一个以网络组件为先的框架。它包含几个常用的框架功能，例如 JSX 和 TypeScript
- Angular 元素提供了一种将 Angular 组件封装为网络组件的方法。
- Vue.js 网络组件封装容器提供了一种将 Vue 组件打包为网络组件的方法。
更多资源：
- open-wc.org 提供了出色的入门信息，以及构建和开发工具的提示和默认配置。
- 网站开发基础提供了有关基本网络组件 API 的入门指南以及网站组件设计最佳实践。
- MDN 提供了网络组件 API 的参考文档以及一些教程。\
主打图片：Jason Tuinstra 在 Unsplash 网站发布。
编者注：自定义元素用量图表已更新为显示 chromestatus.com 上报告的完整每月用量数据。此博文的先前版本包含以 6 个月为粒度的图表，其中不含最近几个月。原始图表中为 V0 和 V1 系列堆叠；现在，它们不堆叠显示，并使用总线，以消除歧义。在 2017 年底， chromestatus.com 的数据收集系统发生了变更。这一变化会影响到所有 Web 平台功能的统计信息，并且使得日后的衡量结果更加准确。