列举网首页
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，以便您可以在任何网页中使用创
建的组件。
