34 lines
1.9 KiB
Markdown
34 lines
1.9 KiB
Markdown
|
---
|
|||
|
|
title: Web Components
|
|||
|
|
localeTitle: Web组件
|
|||
|
|
---
|
|||
|
|
## 什么是Web组件？
|
|||
|
|
|
|||
|
|
Web组件由[W3C](https://w3c.github.io/)创建的一系列Web规范组成。 这些规范描述了一组Web平台API，可用于创建可重用，封装和可自定义的HTML元素。 通过公开浏览器供应商使用的低级Web API来创建您可能已经熟悉的HTML元素，可以使用Web组件 各种环境。 这意味着您是在使用Wordpress站点，服务器呈现的应用程序，使用最新框架的单页应用程序（SPA），还是根本没有框架， 可以使用Web组件。 这是第一次，无论使用什么框架，您都可以将网络理解为一个平台，可以轻松创建独特的体验 从一个平台翻译成另一个平台。
|
|||
|
|
|
|||
|
|
## Web组件规范
|
|||
|
|
|
|||
|
|
Web组件在[四个主要规范](https://www.webcomponents.org/introduction#specifications)中定义。
|
|||
|
|
|
|||
|
|
* **自定义元素**
|
|||
|
|
|
|||
|
|
* [Custom Elements规范](https://w3c.github.io/webcomponents/spec/custom/)为设计和使用新类型的DOM元素奠定了基础。
|
|||
|
|
|
|||
|
|
* **暗影DOM**
|
|||
|
|
|
|||
|
|
* [Shadow DOM规范](https://w3c.github.io/webcomponents/spec/shadow/)定义了如何在Web组件中使用封装样式和标记。
|
|||
|
|
|
|||
|
|
* **ES模块**
|
|||
|
|
|
|||
|
|
* [ES模块规范](https://html.spec.whatwg.org/multipage/webappapis.html#integration-with-the-javascript-module-system)定义了包含 以基于标准，模块化，高性能的方式重用JS文档。
|
|||
|
|
|
|||
|
|
* **HTML模板**
|
|||
|
|
|
|||
|
|
* [HTML模板元素规范](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element/)定义了如何声明 标记的片段在页面加载时未使用，但可以在运行时稍后实例化。
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 更多信息：
|
|||
|
|
|
|||
|
|
* [Web组件简介](https://www.webcomponents.org/introduction)
|
|||
|
|
* [可扩展的Web宣言](https://github.com/extensibleweb/manifesto)
|
|||
|
|
* [W3C Web组件规范](https://w3c.github.io/webcomponents/explainer/)
|