广州天象网络技术有限公司Web前端开发趋势

Web组件以及像Stencil一样编译Web组件的工具不太为人所知。
Web组件背后的想法很简单：为什么我们应该使用像React这样的

库来构建只在该库中工作的组件，而不是使用原生的JavaScript

来构建这些组件，并在框架之外使用它们呢？

直到2017年底，浏览器支持是一个更大的问题，但到2018年初，

它看起来相当不错。构成Web组件的四个Web API：自定义元素

（Custom Elements），虚拟DOM（Shadow DOM），HTML模板和

HTML导入，全部被所有主流浏览器支持。

特别是前两个元素 - 自定义元素和虚拟DOM， 是非常有趣的Web

API。
特别是前两个元素 - 自定义元素和虚拟DOM， 是非常有趣的Web

API。

1.使用自定义元素，你可以做它听起来像：构建自己的HTML元素

（例如）。这些元素包含了所有需要在屏幕上显示的代码 ，不需

要框架！甚至比这更好：如果您需要该框架的其他功能（即超出

其创建可重用组件的功能），则可以将这些元素与Angular等框架

结合使用。

2.虚拟DOM（Shadow DOM）类型的构建，并允许您将某些CSS样式

限制到您的自定义元素。这给你真正可重用的'HTML元素'。

3.HTML模板允许您在自定义元素中定义HTML代码（使用“普通”

元素或其他自定义元素）。

4.HTML导入将允许您将HTML文件导入到HTML文件中，但是这个标

准正在死亡，这并不是真的需要，因为我们通常使用构建工具和

打包工具，比如Webpack。

如这些示例所示，手动构建Web组件/自定义元素可能会变得非常

麻烦。

这就是为什么像StencilJS这样的组件编译器看起来非常有前途的

原因。Angular Elements将是另一个项目，允许您使用更好的语

法，然后自动将其编译为本地Web组件。

这些项目背后的核心思想是：给你一个很好的语法和很多辅助类

- Stencil使用TypeScript，JSX和Angular-inspired特性，

Angular Elements使用Angular来构建自定义Web组件。您的代码

将被编译为原生的JavaScript，以便您可以在任何网页中使用创

建的组件。