【译】Web Components简介

本文翻译自： https://css-tricks.com/an-int...

本文首发于公众号：符合预期的CoyPan

前端开发正在以惊人的速度发展。曾经的前端开发，技术栈都是很简单的，如今却越来越复杂。这一点从无数的文章、教程和Twitter上就可以看出来。在本文中，我将讨论为什么Web Component是一个很好的工具，可以在不使用复杂框架或构建步骤的情况下提供高质量的用户体验，而且不存在过时的风险。在这个由五部分组成的系列的后续文章中，我们将深入研究每个规范。

本系列假设您基本了解HTML、CSS和JavaScript。如果您在其中一个领域感到软弱，不用担心，构建自定义元素实际上简化了许多前端开发中的复杂性。

系列文章：

An Introduction to Web Components (本文)

Crafting Reusable HTML Templates

Creating a Custom Element from Scratch

Encapsulating Style and Structure with Shadow DOM

Advanced Tooling for Web Components

到底什么是Web Components

Web Components 由三种技术组成。这三种技术会一起使用。

1. Custome Elements。自定义元素十分简单，他们都是合法的HTML元素，拥有自定义的模板，表现以及标签名(例如：)。可以通过一系列的JavaScript API来创建自定义元素。自定义元素是在标准HTML规范中定义的。
2. Shadow DOM。像一个Iframe一样，可以隔离CSS和JavaScript。这是在标准DOM规范中定义的。
3. HTML templates。用户在HTML中定义的模板，只有调用的时候才会被渲染。