2019 年 I/O 大会上的 Web 组件
发布日期：2019 年 6 月 18 日
在 2019 年 Google I/O 大会上，Polymer 项目的 Kevin Schaaf 和 Salesforce 的 Caridy Patiño 讨论了 Web 组件的现状。
Web 组件有多受欢迎？
如果您今天使用过网络，那么您可能已经使用过 Web 组件。据我们统计，目前约有 5% 到 8% 的网页加载使用了一个或多个 Web 组件。这使得 Web 组件成为过去五年中推出的最成功的新 Web 平台功能之一。
您可能每天都会在 YouTube 和 GitHub 等网站上看到 Web 组件。许多使用 AMP 构建的新闻和发布网站也使用了 Web 组件，因为 AMP 组件也是 Web 组件。许多企业也开始采用 Web 组件。
什么是 Web 组件？
那么，什么是 Web 组件？Web 组件规范提供了一组低级 API，可让您扩展浏览器的内置 HTML 标记集。Web 组件提供：
- 创建组件的常用方法（使用标准 DOM API）。
- 一种接收和发送数据的通用方式（使用属性/事件）。
除了该标准接口之外，标准并未对组件的实际实现方式做出任何规定：
- 它使用哪种渲染引擎来创建 DOM。
- 如何根据其属性或特性的变化进行自我更新。
换句话说，Web 组件会告知浏览器何时以及何处创建组件，但不会告知浏览器如何创建组件。
作者可以选择像 React 一样的函数式渲染模式来构建其 Web 组件，也可以使用 Angular 或 Vue 中可能用到的声明式模板。作为作者，您可以完全自由地选择在组件内使用的技术，同时仍能保持互操作性。
Web 组件有哪些用途？
Web 组件与专有组件系统之间的主要区别在于互操作性。由于 Web 组件具有标准接口，因此您可以在任何使用内置元素（例如 <input> 或 <video>）的地方使用 Web 组件。
由于它们可以表示为真实的 HTML，因此可以由所有热门框架呈现。这样，您的组件就可以在更多样化的应用中得到更广泛的使用，而不会将用户锁定在任何一个框架中。
由于组件接口是标准的，因此使用不同库实现的 Web 组件可以在同一页面上混合使用。这一事实有助于在您更新技术栈时确保应用不会过时。您无需在框架之间进行巨大的阶跃式更改（即替换所有组件），而是可以一次更新一个组件。
谁在使用 Web 组件？
因此，Web 组件在各种不同的应用场景中都取得了巨大成功。其中有三个应用场景尤其受欢迎：内容网站、设计体系和企业应用。
展示广告网络网站
Web 组件是渐进增强内容的完美技术，因为它们已经可以由无数 CMS 系统输出为标准 HTML。
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 组件，具有草图、手绘外观。
- 有一些出色的专用 Web 组件（例如
<model-viewer>），您可以将其放入任何应用中以添加 3D 内容。
如果您正在为公司开发设计体系，或者正在销售希望可在任何环境中使用的单个组件或库，请考虑使用 Web 组件来编写组件。您可以使用内置的 Web 组件 API，但它们非常底层，因此有许多库可用于简化该过程。
如需开始构建自己的组件，您可以查看 LitElement，这是 Google 开发的 Web 组件基类，具有类似于 React 的出色功能渲染体验。
可考虑的其他工具和库：
- Stencil 是一个 Web 组件优先的框架。它包含多个热门框架功能，例如 JSX 和 TypeScript
- Angular Elements 提供了一种将 Angular 组件封装为 Web 组件的方法。
- Vue.js Web 组件封装容器提供了一种将 Vue 组件打包为 Web 组件的方法。
更多资源：
- open-wc.org 提供了丰富的入门信息，以及有关构建和开发者工具的提示和默认配置。
- 网站开发基础 提供了有关基本 Web 组件 API 的入门指南，以及设计 Web 组件的最佳实践。
- MDN 提供了 Web 组件 API 的参考文档以及一些教程。