基于 Custom  Elements 标准组件化构建 Web 应用
首先看自定义标签，自定义标签在功能上逻辑上与 JavaBean 类似，都封装 Java 代码，是可重用的组件代码，并且允许开发人员为复杂的操作提供逻辑名称。另外，自定义标签具有⽀持⽆障碍、提高开发效率、评估性能、对 SEO 良好的特点。
其中，如何使用自定义标签进行性能评估呢？百度提供了一套搜索引擎的验证工具。比如，符合某一种规则的 Custom  Elements，给它标高分，为符合高性能标签。但如果使用 DIV 的方式，搜索引擎没办法知道布局是不是高性能，也没办法知道所对应的 JS 如何实现，如果有了 Custom  Elements 的标准，就能清晰地知道这个页面想干什么。
基于此，我们可以设想：如果完全使用这些 Custom  Elements 语义化标签构建 Web 站点可行吗？
这就需要引入组件化设计。其实目前存在的组件化设计都千篇一律，把一个页面的功能模块以组件树状的形式自由组合，堆积成一个功能的页面或者是模块，这就是组件的结构。具体要求：
每⼀个 Custom Element 是⼀个组件
组件内部实现相应的交互、功能和数据处理逻辑
组件之间逻辑和样式是独⽴隔离的
组件是可以通信的
组件是可复⽤的
Web Components 是指通过一种标准化的非侵入的方式封装的一个组件。主要标准包括 Custom Elements，Shadow DOM，HTML Templates，HTML Imports 等多个维度的规范与实现。
Custom Elements 是提供一种方式让开发者可以自定义 HTML 元素，包括特定的组成，样式和行为。支持 Web Components 标准的浏览器会提供一系列 API 给开发者用于创建自定义的元素，或者扩展现有元素。
Shadow DOM 旨在提供一种更好地组织页面元素的方式，来为日趋复杂的页面应用提供强大支持，避免代码间的相互影响。开发者可利用 Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。
HTML Imports 是一种在 HTML 中引用以及复用其他的 HTML 文档的方式，可以简单理解为常见的模板中的 include 之类的作用。我们可以通过 HTML  Import 的形式，直接将做的 Custom  Elements 的标签放进 HTML 中进行渲染渲染。

能坚持学习的人都是最棒的。

不忘初心，坚持

白白胖胖充满希望

沅有芷兮澧有兰，思公子兮未敢言。

不要依赖梦想而忘记生活

我从不喜欢迁就却用最干净的真心为你妥协了很久。

有些事我并不是不知道，只是我可以装作不知道。

羡慕不能眼红，敢拼才是英雄。

浩气长存不如威风堂堂，逍遥自在不若极乐净土。

我们笑着说再见，却深知再见遥遥无期。

有一种能力是不断持续的努力

今天不想跑，所以才去跑，这才是长距离跑者的思维方式。