Web Components初探

作者: 张中华 | 来源:发表于2020-09-08 16:57 被阅读0次

组件化,标签语义化,是前端发展的趋势。现在流行的组件化框架有React、Vue等,标签语义化在H5中添加的article、dialog等。
Web Components 就是类似的一套技术,允许您创建可重用的定制元素,并且在您的web应用中使用它们。

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

  • Custom elements(自定义元素):一组JavaScript API,允许您定义custom elements及其行为,然后可以在您的用户界面中按照需要使用它们。
  • Shadow DOM(影子DOM):一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
  • HTML templates(HTML模板): <template><slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
实现web component的基本方法通常如下所示:
  1. 创建一个类或函数来指定web组件的功能,如果使用类,请使用 ECMAScript 2015 的类语法(参阅获取更多信息)。
  2. 使用 CustomElementRegistry.define() 方法注册您的新自定义元素 ,并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
  3. 如果需要的话,使用Element.attachShadow() 方法将一个shadow DOM附加到自定义元素上。使用通常的DOM方法向shadow DOM中添加子元素、事件监听器等等。
  4. 如果需要的话,使用 <template><slot> 定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。
  5. 在页面任何您喜欢的位置使用自定义元素,就像使用常规HTML元素那样。

简单做一个显示文本的例子,感受以下Web Components代码如下:

main.js
class ShowText extends HTMLElement {
    constructor() {
        super()
    }

    connectedCallback() {
        const text = this.getAttribute('text');
        this.outerHTML = `<div style="color: red;">文本为: <label>${text}</label></div>`;

    }
}

customElements.define('show-text', ShowText);

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./main.js"></script>
</head>
<body>
    <show-text text="hello world"></show-text>
    <show-text text="你好"></show-text>
</body>
</html>
测试结果

接下来会一个知识点一个知识点慢慢梳理~
参考地址:https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

相关文章

  • Web Components初探

    组件化,标签语义化,是前端发展的趋势。现在流行的组件化框架有React、Vue等,标签语义化在H5中添加的arti...

  • Web Components技术初探

    前言 不知不觉,2019年即将接近尾声,现有前端三大框架也各自建立着自己的生态、自己的使用群体。从angular1...

  • 未来学习规划

    了解Web Components开发;zh-Web_Components、en-Web_Components 了解...

  • 了解 Web Components

    Web Components 首先来了解下 Web Components 的基本概念, Web Component...

  • web components

    web components:一种原生的写组件的方式。下面将主要介绍四个概念:custom element、sha...

  • Web Components

    作用: Web组件化,可复用UI模块。 标准: Web Components不是单一的规范,而是一系列的技术组成,...

  • web components

    首先来看浏览器源生的web components demohttps://www.webcomponents.or...

  • Web Components

    一、组件化开发 1、组件化开发的优势 管理和使用非常容易,加载或卸载组件,只要添加或删除一行代码就可以了 组件非常...

  • Web Components

    定义 浏览器原生支持的一套组件封装技术。这里有两个关键字: 组件技术 浏览器原生 组件化一直是前端完善的方向,从早...

  • Web Components

    Web Components允许创建可重用的定制元素,并且在web应用中使用它们。 HTML Templates ...

网友评论

    本文标题:Web Components初探

    本文链接:https://www.haomeiwen.com/subject/jafrektx.html