一起认识下 Web Components API

web components 是基于最新的 web 标准,允许您创建可重用的自定义元素(它们的功能封装在您的代码之外)并且可以在你喜欢的任何地方重用,不必担心代码冲突。它可以超越 Vue React 等框架而存在,可以在不同的技术栈中使用。

Web Components 主要提供了四项技术:

  1. Custom Elements (自定义元素)- 允许您定义 custom elements 及其行为,然后可以在您的用户界面中按照需要使用它们。
  2. Shadow DOM(影子 DOM)- 用于将封装的影子 DOM 树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式可以保持元素功能的私有。
  3. HTML templates(HTML模板)- <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
  4. HTML Imports(HTML导入)- HTML 导入是一种机制(Mozilla 不赞成这种方法,并打算在将来实现更合适的)。

这四种技术通过接口 customElementRegistryHTMLSlotElementHTMLTemplateElementShadowRoot 提供的 API 来实现开发目的。

接口 - CustomElementRegistry

Custom elements(自定义元素)的 CustomElementRegistry 接口提供注册自定义元素和查询已注册元素的方法。要获取它的实例,需要使用 window.customElements 属性。

接口 - HTMLSlotElement

Shadow DOM(影子DOM)的接口 HTMLSlotElement 使其能够访问到 HTML元素 <slot> 的 name 和分配的节点。

接口 - HTMLTemplateElement

HTML templates(HTML模板)可以使用 HTMLTemplateElement 接口来访问 HTML <template> 元素的内容。

接口 ShadowRoot

Shadow DOM(影子DOM)ShadowRoot 接口是一个 DOM 子树的根节点,它与文档的主 DOM 树分开渲染。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。

HTML Imports(HTML导入)

HTML Imports 旨在成为 Web Components 的打包机制,但也可以单独使用 HTML Imports。

可以在HTML文档中使用 <link> 标签导入 HTML 文件,如下所示:

<link rel="import" href="myfile.html">

在 Google Chrome 73 后此功能已过时。它现在可能仍然适用于某些浏览器,但不鼓励使用它,因为它随时可能被删除,尽量避免使用它。

创建自定义组件

使用 Web Component API 定义自定义组件,基本方法通常如下所示:

1. 使用 ES6 类语法创建一个类,来指定 web 组件的功能。

class SimpleCustom extends HTMLElement {
  constructor() {
    super();
    const divElem = document.createElement('div');
    divElem.textContent = this.getAttribute('text');
  }
}

2. 使用 CustomElementRegistry.define() 方法注册您的新自定义元素 ,并向其传递要定义的元素名称、指定元素功能的类以及可选的,其所继承自的元素。

customElements.define('simple-custom', SimpleCustom);

3. 如果需要的话,使用 Element.attachShadow() 方法将一个 shadow DOM 附加到自定义元素上。使用通常的DOM方法向 shadow DOM 中添加子元素、事件监听器等等。

const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(divElem);

4. 如果需要的话,使用 <template><slot> 元素定义一个HTML模板。再次使用常规 DOM 方法克隆模板并将其附加到您的 shadow DOM 中。

HTML

<template id="my-paragraph">
  <p><slot name="my-text">My default text</slot></p>
</template>

<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

JS

customElements.define('my-paragraph',
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('my-paragraph');
      const templateContent = template.content;
      this.attachShadow({mode: 'open'}).appendChild(
        templateContent.cloneNode(true)
      );
    }
  }
);
const slottedSpan = document.querySelector('my-paragraph span');
console.log(slottedSpan.assignedSlot);
console.log(slottedSpan.slot);

5. 在页面任何您喜欢的位置使用自定义元素,就像使用常规 HTML 元素那样。

<summary-display>
  <summary-item>common</summary-item>
  <summary-item>sweet</summary-item>
  <summary-item>crunchy</summary-item>
  <summary-item>fruit</summary-item>
</summary-display>

更多阅读:

https://developer.mozilla.org/zhCN/docs/Web/API

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

原文发布于微信公众号 - 前端infoQ(webinfoq)

原文发表时间:2019-05-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券