基于 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 中进行渲染渲染。作者: 398580721 时间: 2019-9-3 14:19