WebComponent：像搭积木一样构建Web应用

什么是组件化？

对内高内聚，对外低耦合。

对内各个元素彼此紧密结合、相互依赖，对外和其他组件的联系最少且接口简单。

阻碍前端组件化的因素有哪些？

• CSS是影响全局的。渲染引擎会将所有的 CSS 内容解析为 CSSOM，在生成布局树的时候，会在 CSSOM 中为布局树中的元素查找样式，所以有两个相同标签最终所显示出来的效果是一样的
• DOM 也是阻碍组件化的一个因素，因为在页面中只有一个 DOM，任何地方都可以直接读取和修改 DOM

JavaScript有自己的函数级作用域和块级作用域，所以封装内部状态数据并提供接口给外部都是没有问题的，但是一旦遇上 CSS 和 DOM，那么就相当难办了

WebComponent是如何解决的？

它提供了对局部视图封装能力，可以让 DOM、CSSOM 和 JavaScript 运行在局部环境中，这样就使得局部的 CSS 和 DOM 不会影响到全局。

WebComponent 是一套技术的组合，具体涉及到了Customelements（自定义元素）、Shadow DOM（影子 DOM）和HTML templates（HTML模板）

如何使用 WebComponent？

• 使用 template 属性来创建模板， DOM 树中的 template 节点不会出现在布局树中，所以我们可以使用 template 来自定义一些基础的元素结构

• 创建一个 GeekBang 的类，在该类的构造函数中要完成三件事：

  • 查找模板内容
  • 创建影子 DOM
  • 再将模板添加到影子 DOM 上

• 像正常使用 HTML 元素一样使用该元素

影子DOM的作用是什么？

• 影子 DOM 中的元素对于整个网页是不可见的；
• 影子 DOM 的 CSS 不会影响到整个网页的 CSSOM，影子 DOM 内部的 CSS 只对内部的元素起作用。