原文地址：www.nexmo.com/blog/2020/0…
原文作者：www.nexmo.com/blog/author…
发布时间：2020年3月24日
JavaScript框架和库，我们都同意有很多。Angular、React、Vue、Svelte--这个名单似乎每年都在增加。但是，它们都有什么共同点呢？答案是它们都是用来在网络上构建应用程序的，并且它们提供了创建可重用组件的能力。
如果你能基于现有的网络标准创建组件，这些组件不依赖于用于将所有东西粘合到应用程序中的框架或库，那会怎样？这就是Web Componentes的作用。
谁在使用Web Components？
以下是一些您可能听说过的使用Web Components的公司。
使用Web Components的公司标志。Google、Salesforce、Electronic Arts、Twitter、YouTube和GitHub。
谷歌：包括AMP Web Components框架在内的许多属性（源）。
Salesforce: Lightning Web Components(来源)
推特。嵌入式推文（来源）
GitHub。"更新前"(来源)
YouTube。该网站是用Web Components建立的（来源）。
案例研究
让我们深入了解一下Electronic Arts（EA）是如何使用Web Components的。(来源)
EA是最大的游戏公司之一，在全球30个地方拥有超过22个工作室和1万名员工。不用说，他们发布了很多游戏（NBA Live、星球大战、模拟人生、战地等）。
一开始，网络团队采取了独立设计和开发每款游戏的网站的方式，每次只做一个网站。可想而知，这导致用户在浏览EA提供的所有游戏时，缺乏连贯的体验。对于在网站上工作的设计师和开发人员来说，这也是很困难的。他们花了80%的时间在 "商品网 "上，（即导航、页脚和媒体库），而不是为每个游戏标题建立自定义体验。
为了扭转这一比例，他们创建了网络设计系统（NDS）。有了NDS，他们就可以利用商品网的组件并添加。
- "Theming "功能
- 能够与任何语言和框架整合
- 支持其微网站架构
- 以用户界面即服务（UIaaS）的方式交付。
你知道还有谁最可能使用过Web Components吗？
就是您。你有没有想过，你怎么可能只需在<video>或<audio>上设置'src'属性，就能拥有一个功能齐全的播放器，包括按钮、音量控制、进度条、计时器和其他选项？网络组件。
一个例子
让我们看看一个同样容易使用，但在幕后发生了更多事情的例子--由Google开发的模型查看器Web Components。
以下是显示一个3D模型所需的代码。
<!-- Import the component -->
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">https://unpkg.com/@google/model-viewer/dist/model-viewer.js</a>
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js</a>
<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>
通过一个简单的HTML标签，您可以嵌入一个3D模型，而无需了解WebGL和WebXR设备API。
这里是在框架/库内或在没有框架/库的情况下实现的模型查看器Web组件。
Vanilla JavaScript
Angular
React
什么构成了一个网络组件
希望看到谁在使用Web Components，以及可以用Web Components创建什么，现在您已经想知道如何创建自己的Web Components了。
如前所述，Web Components是建立在Web标准之上的。这些低级别的API包括
- 自定义元素
- 影子DOM
- HTML模板
自定义元素API。允许你在页面上注册一个自定义元素。
- 必须包含一个连字符/破折号(Kebab-case)，即my-custom-element。不能使用单字元素，以防止名称冲突。
- 这是一个定义其行为的类对象。
- 也决定了自定义元素扩展了哪些（如果有的话）内置元素，即输入（HTMLInputElement）、按钮（HTMLButtonElement）等。
影子DOM API。便于使用一种方法将一个单独的DOM附加到一个元素上。
- 它提供了封装，以保持风格、结构和行为与外部代码分离。它有助于"......包含毛"--Paul Lewis (源码)
- 允许对事件进行重新映射，即把一个点击事件变成更有意义的东西。
HTML模板API。创建一个灵活的模板，该模板将被插入到自定义元素的影子DOM中。
<template>元素的内容不会立即呈现。我们前期定义了HTML结构，需要时通过JavaScript进行克隆。- 用于有效地渲染HTML，并在用户与我们的Web组件交互时更新它。
- 对于更复杂的模板，使用库、框架或工具可能更容易。
基本示例
这是我写的一个Web组件示例，并附有注释，以帮助解释发生了什么。
浏览器支持
如果您想知道浏览器的支持，现代浏览器都支持Web Components。
表显示了浏览器对Web Components的支持。
对于旧的浏览器，你可以使用polyfills：www.webcomponents.org/polyfills。
在Vonage，我们正在创建Web组件，以构建一个像前面提到的Electronic Arts的设计系统。我们的目标是让用户能够轻松地组装组件来构建像聊天应用程序这样的东西，而不必担心幕后发生的事情。
下面是一些资源，可以了解更多关于Web Components的信息。
下一步是什么？
我做的Web组件的例子是一个简单的例子。随着组件的复杂性增加，使用一个工具可能会使开发变得更容易。在下一篇博文中，我们将比较创建Web组件的不同框架和工具。
