前端开发

代码速查

生命周期

    customElements.define('fancy-components', class extends HTMLElement {
      constructor () {
        super()
        // 相当于 Vue 的 setup
        console.log('先运行构造函数')
      }
      connectedCallback () {
        // 相当于 Vue 的 mounted
        console.log('再运行连接回调')
      }
      disconnectedCallback () {
        // 相当于 Vue 的 unmounted
        console.log('当删除组件时才会运行失联回调')
      }
      adoptedCallback () {
        // 当使用 document.adoptNode 后会触发该生命周期
        console.log('当使用 document.adoptNode 后会运行收养回调')
      }
    })

基础使用

    // 创建一个  的元素，名为 el
    const el = document.createElement('a-b-c')

    // 定义一个名为  的组件
    customElements.define('a-b-c', class extends HTMLElement {})

    // 获取  组件的构造函数
    customElements.get('a-b-c')

    // 升级我们之前创建的 el 元素
    customElements.upgrade(el)

    // 当  组件定义后
    customElements.whenDefined('a-b-c').then(
    () => { /* 当  组件定义后的回掉函数 */ }
    )

属性

特性

继承

Custom Elements 的意义

Web Components 标准非常重要的一个特性是，它使开发者能够将 HTML 页面的功能封装为 custom elements（自定义标签），而往常，开发者不得不写一大堆冗长、深层嵌套的标签来实现同样的页面功能。

Custom Elements 是网页组件化的基础，也是其核心。

Custom Elements 的分类

根据是否继承基础 HTML 元素，将 Custom Elements 分为两类。

Autonomous custom elements

是独立的元素，它不继承其他内建的 HTML 元素。你可以直接把它们写成HTML标签的形式，来在页面上使用。例如 ，或者是document.createElement("my-card")这样。

Customized built-in elements

继承自基本的HTML元素。在创建时，你必须指定所需扩展的元素，使用时，需要先写出基本的元素标签，并通过  is 属性指定custom element的名称。例如

, 或者 document.createElement("p", { is: "my-card" })。

CustomElementRegistry 对象

我们对自定义标签的概念等相关知识已有了解，那在实际开发中到底怎么使用自定义标签呢？这里就需要介绍一下 Custom Elements 的重点对象——CustomElementRegistry 对象。

要获取它的实例，请使用  window.customElements 属性。它的主要作用有：

• 给页面注册一个自定义标签

• 获取已注册的 Custom Elements 的相关信息

我们来看一下 CustomElementRegistry 对象的相关方法：

可以看到， CustomElementRegistry 对象包含四个方法：

• CustomElementRegistry.define()

• CustomElementRegistry.get()

• CustomElementRegistry.upgrade()

• CustomElementRegistry.whenDefined()

以上就是前端Web Components之customElements速查表全部内容,感谢大家支持自学php网。