详解vue3.2新增的defineCustomElement底层原理

更新时间：2021年08月27日 09:35:53 作者：artist

本文主要介绍了vue3.2新增的defineCustomElement底层原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Web Components

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

相当于是浏览器原生的定义组件的方式，不用通过vue或者react这些框架实现组件的定义

customElements

概述

customElements 是Window对象上的一个只读属性，接口返回一个CustomElementRegistry 对象的引用，可用于注册新的 custom elements，或者获取之前定义过的自定义元素的信息。

HTMLTemplateElement 内容模板元素

概述

HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

常用属性

content 获取DocumentFragment 元素片段的内容
相当于通过document.createDocumentFragment()创建的元素片段，

  <!-- 定义template片段 -->
  <template id="element-template">
    <div>test-template</div>
  </template>

  <script>
    /* 获取template片段 */
    const ele = document.getElementById('element-template')
    ele.content instanceof DocumentFragment  //true

    /* 通过createDocumentFragment创建html片段*/
    const div = document.createDocumentFragment('div')
    div instanceof DocumentFragment    //true

    /* 结论 */
    // 定义在html上的template获取它的content相当于和通过createDocumentFragment创建的html片段是一个东西
  </script>

ShadowRoot

概述

Shadow DOM API 的 ShadowRoot 接口是一个 DOM 子树的根节点, 它与文档的主 DOM 树分开渲染。
你可以通过使用一个元素的 Element.shadowRoot 属性来检索它的参考,假设它是由 Element.attachShadow() 创建的并使 mode 设置为 open.

通过 Element.attachShadow()挂载影子DOM

完整的演示代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <test-shadow-root></test-shadow-root>

  <template id="temEle">
    <style>
      .main{
        color: #f00;
      }
    </style>
    <div class="main">
      我是template片段
      <!-- 使用插槽 -->
      <slot name="header"></slot>
    </div>
  </template>
  <test-template-ele>
    <!-- 定义插槽 -->
    <style>
      .slot{
        color: rgb(87, 28, 223);
      }
    </style>
    <div class="slot" slot="header">我是slot</div>
  </test-template-ele>

  <!-- 生命周期测试 -->
  <div id="moveDiv">
    <button id="add">添加</button>
    <button id="update">更新</button>
    <button id="move">移动</button>
    <button id="remove">删除</button>
  </div>

  <!-- 通过is挂载 -->
  <div is="test-is-com">
    <div>AAA</div>
  </div>


  <script>
    /* 自定义web-components */
    customElements.define('test-shadow-root', class extends HTMLElement {
      /* 当test-shadow-root组件被挂载到DOM上时，执行构造函数 */
      constructor() {
        super()
        const shadowRoot = this.attachShadow({mode: 'open'}) //给指定的元素挂载影子DOM
        // 当执行 this.attachShadow()方法时，shadowRoot被挂载构造函数中，可以通过this访问
        // mode open shadow root元素可以从js外部访问根节点
        // mode closed  拒绝从js外部访问关闭的shadow root节点
        // console.log('执行', this)
        const div = document.createElement('div')
        div.textContent = '我是div的内容'
        // shadowRoot.appendChild()
        // console.log('this', this.shadowRoot)
        shadowRoot.appendChild(div)
        // this.shadowRoot === shadowRoot  true
      }
    })

    /* 通过template自定义HTMLTemplateElement */
    customElements.define('test-template-ele', class extends HTMLElement {
      constructor() {
        super()
        const temEle = document.querySelector('#temEle')
        const templateContent = temEle.content //获取html片段
        // console.log('AA', templateContent instanceof DocumentFragment) //true
        // templateContent
        // 创建影子DOM，用于挂载template的片段
        const shadowRoot = this.attachShadow({mode: 'open'})
        // console.log('shadowRoot', shadowRoot)
        shadowRoot.appendChild(templateContent)
      }
    })

    /* 通过js创建web-组件，测试生命周期函数 */
      class LifeCycle extends HTMLElement {
        static get observedAttributes() {  //必须添加组件上的属性，才能触发attributeChangedCallback
          return ['c', 'l'];
        }

        constructor() {
          super()
          const shadowRoot = this.attachShadow({mode: 'open'})
          const div = `<div>
            <heaher>我的头</header>
            <div>内容</div>
            <footer>尾部</footer>
          </div>`
          shadowRoot.innerHTML = div
        }

        connectedCallback() {  //添加时，执行
          console.log('添加')
        }
        disconnectedCallback() {//删除时，执行
          console.log('disconnectedCallback')
        }
        adoptedCallback() {
          console.log('adoptedCallback')
        }
        attributeChangedCallback() {  //属性被改变时
          console.log('attributeChangedCallback')
        }
      }

      customElements.define('test-life-cycle', LifeCycle)

      const add = document.querySelector('#add')
      const update = document.querySelector('#update')
      const move = document.querySelector('#move')
      const remove = document.querySelector('#remove')
      const moveDiv = document.querySelector('#moveDiv')
      let testLifeDom = null

      function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      }

      add.addEventListener('click', () => {
        testLifeDom = document.createElement('test-life-cycle')  //创建上面定义的自定义组件
        // console.log('testLifeDom', testLifeDom)
        document.body.appendChild(testLifeDom);
        testLifeDom.setAttribute('l', '100');
        testLifeDom.setAttribute('c', 'red');
        console.log('add', testLifeDom)
      })

      update.addEventListener('click', () => {
        const div = '<div>更新后</div>'
        // console.log('update', testLifeDom.shadowRoot.innerHTML)
        testLifeDom.shadowRoot.innerHTML = div
        testLifeDom.setAttribute('l', random(50, 200));
        testLifeDom.setAttribute('c', `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`);
      })

      move.addEventListener('click', () => {
        console.log('moveDiv', moveDiv)
        moveDiv.appendChild(testLifeDom)
      })

      remove.addEventListener('click', () => {
        console.log('remove')
        document.body.removeChild(testLifeDom);
      })

      /* 通过is挂载组件 */

      customElements.define('test-is-com', class extends HTMLDivElement {
        constructor() {
          super()
          console.log('挂载', this.innerHTML)
          // 通过挂载，this，就是当前被挂载的元素实例，通过这种方式，可以实现一些操作
        }
      }, {extends: 'div'})

  </script>
</body>
</html>

到此这篇关于详解vue3.2新增的defineCustomElement底层原理的文章就介绍到这了,更多相关vue3.2 defineCustomElement内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 虚拟DOM快速入门
这篇文章主要介绍了vue 虚拟DOM的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-04-04
浅析Vue 中的 render 函数
在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM，今天小编就通过本文给大家简单介绍下Vue 中 render 函数,需要的朋友可以参考下
2020-02-02
vue-cli是什么及创建vue-cli项目的方法
vue-cli是 vue 官方提供的、快速生成 vue 工程化项目的工具，支持创建vue2和vue3的项目，本文给大家详细讲解vue-cli是什么及创建vue-cli项目的方法，感兴趣的朋友跟随小编一起看看吧
2023-04-04
详解vue-router2.0动态路由获取参数
本篇文章主要介绍了详解vue-router2.0动态路由获取参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue+el-select 多数据分页搜索组件的实现
本文主要介绍了vue+el-select 多数据分页搜索组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-12-12
vue如何使用媒体查询实现响应式
这篇文章主要介绍了vue如何使用媒体查询实现响应式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue中给el-radio添加tooltip并实现点击跳转方式
这篇文章主要介绍了vue中给el-radio添加tooltip并实现点击跳转方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue混合文件使用以及ref的引用实例详解
ref用来辅助开发者在不依赖于jQuery的情况下,获取DOM元素或组件的引用,下面这篇文章主要给大家介绍了关于Vue混合文件使用以及ref的引用的相关资料,需要的朋友可以参考下
2022-12-12
import.meta.glob() 如何导入多个目录下的资源(最新推荐)
import.meta.glob() 其实不仅能接收一个字符串,还可以接收一个字符串数组,就是匹配多个位置,本文给大家介绍import.meta.glob() 如何导入多个目录下的资源,感兴趣的朋友一起看看吧
2023-11-11
10个Vue3中常用的组合式 API用法详解
通过Vue 3,组合式API增强了我们利用Vue的能力,使我们的代码更具模块性和可读性,本文主要来和大家分享10个常用的Vue3组合式API,希望对大家有所帮助
2024-01-01