「译」Web Components:入门到精通 (1)

作者:Pascal Schilp
原文链接:Web Components: from zero to hero

Web Components: 入门到精通

一个编写原生 Web Components 的教程

Web Components 现在有了越来越大的推动力。随着 Edge 团队宣布部署 Custom Elements 和 Shadow DOM,所有的主流浏览器都已经原生支持 Web Components。像 Github,Netflix,Youtube 和 ING 等甚至已经在生产环境中使用了 Web Components!赞!不过,很让人惊讶的是,这些成功的大公司中没有一个做过(猜的没错) to-do 应用!

因此,今天我们要做一个 to-do 应用,因为世界上还没几个 to-do 应用。你可以在这里先预览一下我们要做的东西。

在开始之前,我要先写点免责声明,这篇博文只是为了让你对 Web Components 的基础概念有个大概的了解。Web Components 是非常底层的技术,并不建议在没有辅助库的情况下编写完整的应用,也不应该拿它跟其他成熟的框架进行比较。

什么是 Web Components?

先说重点:Web Components 是一系列编写具有模块化、可重用和封装性的 HTML 元素的规范。最棒的地方在于:由于它是基于 web 标准,我们无需安装任何框架或库。现在你就可以用纯 JavaScript 编写 Web Components!

不过呢,在我们下手之前,让我们先来看看编写 Web Components 的县官规范。

自定义元素

Custom Elements api 允许我们编写自定义的 DOM 元素。通过这个 api,我们可以定义一个自定义元素,并通知解析器如何正确的构建元素及如何应对此类元素的变动。你是否想过创建自己的元素,比如 ?现在你能够这样做了!

Shadow DOM

Shadow DOM 给了我们封装组件样式和标记的能力。它是一个 DOM 元素的子 DOM 树,可以确保我们的组件样式不会泄漏到外部作用域,或是被外部作用域的样式所影响。是模块化的绝配。

ES 模块

ES 模块规范定义了标准化、模块化、高效率的引用和重用 JS 文件的方式。

HTML Templates

HTML