web components

这里所说的 Web Components指的是一套用于增强 DOM 行为的工具,包括shadow DOM、自定义元素和 HTML 模板。这一套浏览器 API 特别混乱。

  1. 并没有统一的“Web Components”规范:每个 Web 组件都在一个不同的规范中定义。
  2. 有些 Web 组件如shadow DOM 和自定义元素,已经出现了向后不兼容的版本问题。
  3. 浏览器实现极其不一致。

由于存在这些问题,因此使用 Web 组件通常需要引入一个 Web 组件库,比如 Polymer。这种库可以作为脚本,模拟浏览器中缺失的 Web 组件。

HTML 模板

在 Web 组件之前,一直缺少基于 HTML 解析构建 DOM 子树,然后在需要时再把这个子树渲染出来的机制。一种间接方案是使用 innerHTML 把标记字符串转换为 DOM 元素,但这种方式存在严重的安全隐患。另一种间接方案是使用dcument.createElement() 构建每个元素,然后逐个把它们添加到单根节点(不是添加到 DOM),但这样做特别麻烦,完全与标记无关。
相反,更好的方式是提前在页面中写出特殊标记,让浏览器自动将其解析为 DOM 子树,但跳过渲染。这正是 HTML 模板的核心思想,而