From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/web_components/index.html | 215 ++++++++++++++++++++++++++++++ 1 file changed, 215 insertions(+) create mode 100644 files/zh-cn/web/web_components/index.html (limited to 'files/zh-cn/web/web_components/index.html') diff --git a/files/zh-cn/web/web_components/index.html b/files/zh-cn/web/web_components/index.html new file mode 100644 index 0000000000..bb6c25179f --- /dev/null +++ b/files/zh-cn/web/web_components/index.html @@ -0,0 +1,215 @@ +--- +title: Web Components +slug: Web/Web_Components +tags: + - Landing + - Web Components +translation_of: Web/Web_Components +--- +
{{DefaultAPISidebar("Web Components")}}
+ +
+

Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。

+
+ +

概念和使用

+ +

作为开发者，我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML（以及相关的样式和脚本），有时您不得不写代码来呈现自定义UI控件，并且如果您不小心的话，多次使用它们会使您的页面变得一团糟。

+ +

Web Components旨在解决这些问题 — 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

+ + + +

实现web component的基本方法通常如下所示：

+ +
    +
  1. 创建一个类或函数来指定web组件的功能，如果使用类，请使用 ECMAScript 2015 的类语法(参阅类获取更多信息)。
    2. +
  2. 使用 {{domxref("CustomElementRegistry.define()")}} 方法注册您的新自定义元素 ，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
    3. +
  3. 如果需要的话，使用{{domxref("Element.attachShadow()")}} 方法将一个shadow DOM附加到自定义元素上。使用通常的DOM方法向shadow DOM中添加子元素、事件监听器等等。
    4. +
  4. 如果需要的话，使用 {{htmlelement("template")}} 和{{htmlelement("slot")}} 定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。
    5. +
  5. 在页面任何您喜欢的位置使用自定义元素，就像使用常规HTML元素那样。
    6. +
+ +

教程

+ +
+
Using custom elements
+
介绍如何使用自定义元素的功能来创建简单的 web components，以及生命周期回调和其他更高级的功能。
+
Using shadow DOM
+
介绍 shadow DOM 的基础知识，展示如何向元素中附加shadow DOM，添加到shadow DOM树，添加样式等等。
+
Using templates and slots
+
介绍如何使用{{htmlelement("template")}} 和 {{htmlelement("slot")}} 元素定义可重用的HTML结构，然后在Web components中使用该结构。
+
+ +

参考

+ +

Custom elements

+ +
+
{{domxref("CustomElementRegistry")}}
+
包含自定义元素相关功能，最值得注意的是 {{domxref("CustomElementRegistry.define()")}} 方法用来注册新的自定义元素，这样就可以在文档中使用它们。
+
{{domxref("Window.customElements")}}
+
返回 CustomElementRegistry 对象的引用。
+
生命周期回调
+
定义在自定义元素的类定义中的特殊回调函数，影响其行为： +
    +
  • connectedCallback: 当自定义元素第一次被连接到文档DOM时被调用。
    • +
  • disconnectedCallback: 当自定义元素与文档DOM断开连接时被调用。
    • +
  • adoptedCallback: 当自定义元素被移动到新文档时被调用。
    • +
  • attributeChangedCallback: 当自定义元素的一个属性被增加、移除或更改时被调用。
    • +
+
+
+
    +
+
+
+ +
+
创建自定义内置元素的扩展
+
+
    +
  • {{htmlattrxref("is")}} 全局 HTML 属性：允许您指定一个标准HTML元素应该表现得像一个已注册的自定义内置元素。
    • +
  • {{domxref("Document.createElement()")}} 方法的“is”选项：允许您创建一个标准HTML元素的实例，表现得像一个给定的已注册的自定义内置元素。
    • +
+
+
CSS 伪类
+
与自定义元素特别相关的伪类： +
    +
  • {{cssxref(":defined")}}: 匹配任何已定义的元素，包括内置元素和使用CustomElementRegistry.define()定义的自定义元素。
    • +
  • {{cssxref(":host")}}: 选择 shadow DOM 的 shadow host ，内容是它内部使用的 CSS（ containing the CSS it is used inside ）。
    • +
  • {{cssxref(":host()")}}: 选择 shadow DOM 的 shadow host ，内容是它内部使用的 CSS （这样您可以从 shadow DOM 内部选择自定义元素）— 但只匹配给定方法的选择器的 shadow host 元素。
    • +
  • {{cssxref(":host-context()")}}: 选择 shadow DOM 的 shadow host ，内容是它内部使用的 CSS （这样您可以从 shadow DOM 内部选择自定义元素）— 但只匹配给定方法的选择器匹配元素的子 shadow host 元素。
    • +
+
+
+ +

Shadow DOM

+ +
+
{{domxref("ShadowRoot")}}
+
表示shadow DOM子树的根节点。
+
{{domxref("DocumentOrShadowRoot")}}
+
定义了可在文档和shadow根中使用的功能的mixin。
+
{{domxref("Element")}} extensions
+
与shadow DOM有关的Element 接口的扩展: +
    +
  • {{domxref("Element.attachShadow()")}} 方法将shadow DOM树附加给特定元素。
    • +
  • {{domxref("Element.shadowRoot")}} 属性返回附加给特定元素的shadow root，或者 null 如果没有shadow root被附加。
    • +
+
+
{{domxref("Node")}} 相关拓展
+
与 shadow DOM 相关的 Node 接口的拓展: +
    +
  • {{domxref("Node.getRootNode()")}} 方法返回上下文对象的根，可以选择包含shadow root，如果可用的话。
    • +
  • {{domxref("Node.isConnected")}} 属性返回一个布尔值表示节点是否连接（直接或间接）到上下文对象。例如，在普通DOM的情况下为{{domxref("Document")}} 对象，或者在shadow DOM的情况下为 {{domxref("ShadowRoot")}} 。
    • +
+
+
{{domxref("Event")}} 拓展
+
与shadow DOM相关的Event 接口的扩展：
+
+
    +
  • {{domxref("Event.composed")}}: 返回 {{jsxref("Boolean")}} 它表明事件是否会通过shadow DOM边界传播到标准DOM。
    • +
  • 返回事件的路径（侦听器将被调用的对象）。如果shadow root是使用{{domxref("ShadowRoot.mode")}}为closed创建的，则不包括shadow树中的节点。
    • +
+
+
+ +

HTML templates

+ +
+
{{htmlelement("template")}}
+
包含一个HTML片段，不会在文档初始化时渲染。但是可以在运行时使用JavaScript显示。主要用作自定义元素结构的基础。关联的DOM接口是{{domxref("HTMLTemplateElement")}}。
+
{{htmlelement("slot")}}
+
web component中的一个占位符，你可以填充自己的标记，这样你就可以创建单独的DOM树并将它们呈现在一起。关联的DOM接口是{{domxref("HTMLSlotElement")}}。
+
The slot global HTML attribute
+
将在shadow DOM树中的插槽分配给一个元素。
+
{{domxref("Slotable")}}
+
由 {{domxref("Element")}} 和 {{domxref("Text")}} 节点实现的mixin，定义了允许它们成为 {{htmlelement("slot")}} 元素内容的特性。mixin定义了一个属性， {{domxref("Slotable.assignedSlot")}}，返回节点所插入的插槽的引用。
+
+ +
+
{{domxref("Element")}} extensions
+
与插槽相关的Element接口的扩展： +
    +
  • {{domxref("Element.slot")}}: 返回附加到元素上的shadow DOM插槽的名字。
    • +
+
+
CSS pseudo-elements
+
slots特别相关的伪元素: +
    +
  • {{cssxref("::slotted")}}: 匹配任何已经插入一个slot的内容。
    • +
+
+
The {{event("slotchange")}} event
+
当插槽中的节点改变时在 {{domxref("HTMLSlotElement")}} 实例（<slot> 元素）上触发。
+
+ +

例子

+ +

在 web-components-examples，我们正在构建一些例子。以后会添加更多。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG","scripting.html#the-template-element","<template> element")}}{{Spec2("HTML WHATWG")}}The definition of {{HTMLElement("template")}}.
{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}{{Spec2("HTML WHATWG")}}The definition of HTML Custom Elements.
{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}{{Spec2("DOM WHATWG")}}The definition of Shadow DOM.
{{SpecName("HTML Imports", "", "")}}{{Spec2("HTML Imports")}}Initial HTML Imports definition.
{{SpecName("Shadow DOM", "", "")}}{{Spec2("Shadow DOM")}}Initial Shadow DOM definition.
+ +

浏览器兼容性

+ +

通常来说:

+ + + +

要获得特定特性的详细浏览器支持，您必须参考上面列出的参考页面。

+ +

另见

+ + -- cgit v1.2.3-54-g00ecf