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