概述
Web Components（Web 组件）规范是一个新兴的技术集合，允许您在前端Web应用程序中定义已封装的自定义HTML元素。 使用Web Components，您可以创建自己声明的API来定义UI，从而创建您自己的商业化应用程序。
本文介绍了Web组件技术及其在新一代纯前端控件集 WijmoJS 中的应用。
Web组件核心技术
Web组件的核心技术由以下四个标准组成：
自定义元素
Shadow DOM
HTML模板
HTML导入
自定义元素
自定义元素允许您创建自己的HTML元素，可以像标记HTML代码一样使用标记。
使用自定义元素，您可以：
纯前端控件集 WijmoJS 作为自定义元素
通过WijmoJS build 462，我们引入了 Web Components互操作用法，允许您将 WijmoJS 控件用作自定义元素。例如，您可以使用以下HTML添加包含列和过滤器的轻量前端表格控件FlexGrid：
<wjc-flex-grid id="grid">
<wjc-flex-grid-filter></wjc-flex-grid-filter>
<wjc-flex-grid-column binding="country" header="Country" width="*"/>
<wjc-flex-grid-column binding="date" header="Date"/>
<wjc-flex-grid-column binding="downloads" header="Downloads"/></wjc-flex-grid>
有了这个标记，你可以一方面使用传统的DOM API在JavaScript代码中操作它，另一方面可以在HTML元素上使用访问控制特定的API。
例如：
选择FlexGrid元素：let grid = docement.getElementById（'grid'）;
调用表格方法：grid.autoSizeColumns（）;
订阅表格事件：grid.addEventListener（'updatedView'，（e）=> {doSomething（）;}）;
这是一个Web Components Intro示例，可用于获取有关WijmoJS Web Components互操作用法的更多详细信息。
若使浏览器在本机离线工作，Web组件就要实现 ES2015（ES6）代码。为了实现这一点，WijmoJS 在build 462中添加了两个npm图像，wijmo-es2015-commonjs-min和wijmo-es2015-esm-min，它们分别包含CommonJS和ESM模块格式的WijmoJS ES6代码。
Web组件的商业化应用
无论是使用纯JavaScript还是使用框架实现应用程序，都可以从Web组件的使用中受益。
纯JavaScript中的Web组件
使用纯JavaScript中的Web组件，您将获得一个声明，自定义可维护的HTML标记，而不用添加一堆这样的神秘元素定义：
<div id=”statGrid”/><div id=” inpSales”/>
使用WijmoJS 控件的 Web组件后，您还可以声明下面的标记：
<wjc-flex-grid>
<wjc-flex-grid-column binding=”date” header=”Date”/>
<wjc-flex-grid-column binding=”sales” header=”Sales”></wjc-flex-grid><wjc-input-number step=”1” format=”c2”/>
这段代码可用于无法以声明方式表示的特殊处理上。也就是说，您可以在正确的位置定义内容 - 标记中的UI及其在JavaScript代码中的行为。
此标记目前在Chrome和Safari中原生使用，并且可以在使用Polyfills技术的其他浏览器中使用。
前端框架中的Web组件
用在 Angular，React 和 Vue 等前端框架中，Web Components会带来更多扩展，如属性、方法和绑定事件。Web Components 提供了为框架显式而创建的本地组件几乎相同的易用×××。允许您在不同的框架中重用由它们创建的相同组件和行为库，而不会牺牲其易用性。
我们在Angular示例中添加了WijmoJS 的 Web组件，演示了它在Angular中的工作原理。
例如，以下HTML标记创建了 WijmoJS 的 InputNumber和LinearGauge控件，这些控件可用来显示和更新相同的模型属性。
注意：在实现这种双向绑定行为时，我们没有使用任何JavaScript代码隐藏行和第三方库：
<wjc-input-number [value]="theValue" (value-changed)="theValue = $event.target.value"/>
<wjc-linear-gauge [value]="theValue" (value-changed)="theValue = $event.target.value"/>
使用Web组件是否要考虑浏览器兼容性？
Web Components适用于所有浏览器。目前，您可以在Chrome和Safari中本地运行Web Components，而不应用任何Polyfill。
FireFox支持特定开发者模式下的Web组件。当然，这种支持很快会应用到实际使用版本中。现在，您也可以使用webcomponentsjs库中的webcomponents-lite.js polyfill在此浏览器中运行Web Components。
当然，Edge和 IE 中也可以使用。您可以通过运行ES5代码并应用webcomponentsjs库中的custom-elements-es5-adapter.js polyfill以及为FireFox指定的polyfill来在Internet Explorer中运行Web组件。
WijmoJS互操作用法和Web组件的未来？
我们已经在WijmoJS Web Components互操作用法方面解决了几个问题。首先是添加更多的示例，特别是在React，Vue和Polymer等不同框架中添加如何演示Web组件的使用示例。如果您需要在其他框架也添加上述示例，可以联系您的技术顾问。
总结
高度用户自定制一直是纯前端控件集WijmoJS的产品特色之一。因此，我们同样为WijmoJS控件添加了对Shadow DOM的支持和原生CSS样式支持的两种模式，Shadow DOM 允许控件可以通过CSS变量（a.k.a.自定义属性）进行自定义，当然这只是一种可选功能（可由全局属性切换），此技术的当前状态在控件定制中施加了严重限制。如果开发人员喜欢更灵活的自定制方式，也可以使用没有Shadow DOM的传统 WijmoJS Web组件。