Web Components 系列之 关于 Custom Elements
本文转载自微信公众号「编程三昧」,作者隐逸王。转载本文请联系编程三昧公众号。
前言
在上一篇文章中介绍了 Web Components 的相关概念,知道它是浏览器用来原生支持“组件化”的方法,并且知晓它的技术组成为:
- Custom Elements
- Shadow DOM
- HTML templates
今天,我们就来学习它的技术之一——Custom Element 的部分相关知识。
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()
接下来,我们分别介绍一下 CustomElementRegistry 对象的各个方法。
CustomElementRegistry.define()
它被用来定义(创建)一个自定义标签。语法如下:
customElements.define(name, constructor, options);
参数解析:
- name 自定义标签名。注意:它不能是单个单词,且其中必须要有短横线,比如:my-card 这样的。
- constructor 自定义元素构造器,它可以控制元素的表现形式、行为和生命周期等。
- options 一个包含 extends 属性的配置对象,是可选参数。它指定了所创建的元素继承自哪个内置元素,可以继承任何内置元素。
返回值为 undefined。
使用示例:
// 声明自定义标签构造函数类
class MyCard extends HTMLParagraphElement{
constructor(){
super();
……
}
}
// 注册自定义标签
customElements.define('my-card', MyCard, { extends: 'p' });
CustomElementRegistry.get()
该方法用于返回之前定义的自定义标签的构造函数。语法如下:
constructor = customElements.get(name);
name 表示想要获取的自定义标签构造函数的标签名,其格式也应该为短横线连接的单词。
指定名字的自定义元素的构造函数,如果没有使用该名称的自定义元素定义,则为undefined。
使用示例:
// 调用 get 方法
customElements.get("my-card");
// class MyCard extends HTMLParagraphElement{
// constructor(){
// super();
// }
// }
customElements.get("MyCard");
// undefined
CustomElementRegistry.upgrade()
该方法将更新 root 子树中所有包含影子 DOM 的自定义元素,甚至在它们载入主文档之前也可以更新。语法如下:
customElements.upgrade(root);
root 表示带有要升级的包含阴影的后代元素的Node实例。如果没有可以升级的后代元素,则不会抛出错误。
其返回值为 undefined。
不调用 upgrade 方法:
const el = document.createElement("my-card");
class MyCard extends HTMLElement {}
customElements.define("my-card", MyCard);
console.log(el instanceof MyCard); // false
调用 upgrade 方法:
const el = document.createElement("my-card");
class MyCard extends HTMLElement {}
customElements.define("my-card", MyCard);
customElements.upgrade(el);
console.log(el instanceof MyCard); // true
CustomElementRegistry.whenDefined()
返回当使用给定名称定义自定义元素时将会执行的 promise。如果已经定义了这样一个自定义元素,那么立即执行返回的 promise。语法如下:
Promise<> customElements.whenDefined(name);
name 还是表示自定义标签的名称。
示例一:
class MyCard extends HTMLParagraphElement {
constructor() {
super();
}
}
customElements.whenDefined("my-card").then(() => {
console.log(`my-card 被注册`);
});
console.log("my-card 注册前");
customElements.define("my-card", MyCard, { extends: "p" });
console.log("my-card 注册后");
// my-card 注册前
// my-card 注册后
// my-card 被注册
如果再次执行以下代码,则会立即执行 resolve 方法:
customElements.whenDefined("my-card").then((res) => {
console.log(res);
console.log(`my-card 被注册`);
});
// my-card 被注册
总结
以上就是关于 Custom Elements 的部分知识点,后续会补充自定义标签的生命周期函数等内容。
相关文章
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- 叹息!GitHub Trending 即将成为历史!
- 微软软了?开源社区讨论炸锅,GitHub CEO 亲自来答
- GitHub Trending 列表频现重复项,前后端都没去重?
- Photoshop Elements 2021版本软件安装教程(mac+windows全版本都有)
- (ps全版本)Photoshop 2020的安装与破解教程(mac+windows全版本都有)
- (ps全版本)Photoshop cc2018的安装与破解教程(mac+windows全版本,包括2023
- 环境搭建:Oracle GoldenGate 大数据迁移到 Redshift/Flat file/Flume/Kafka测试流程
- 每个开发人员都要掌握的:最小 Linux 基础课
- 来撸羊毛了!Windows 环境下 Hexo 博客搭建,并部署到 GitHub Pages
- 超实用!手把手入门 MongoDB:这些坑点请一定远离
- 【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
- 【GitHub日报】22-10-10 brew、minio、vite、seaweedfs、dbeaver 等8款App今日上新
- 【GitHub日报】22-10-11 cobra、grafana、vue、ToolJet、redwood 等13款App今日上新
- Photoshop 2018 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2017 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2020 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)
- 最新版本Photoshop CC2018软件安装教程(mac+windows全版本都有,包括2023