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标签的形式,来在页面上使用。例如 <my-card>
,或者是document.createElement("my-card")
这样。
Customized built-in elements
继承自基本的HTML元素。在创建时,你必须指定所需扩展的元素,使用时,需要先写出基本的元素标签,并通过 is
属性指定custom element的名称。例如<p is="my-card">
, 或者 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 的部分知识点,后续会补充自定义标签的生命周期函数等内容。
- ~
- 本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
Web Components 系列(二)—— 关于 Custom Elements相关推荐
- Web Components 系列(十)—— 实现 MyCard 的基本布局
前言 前面针对 Web Components 学习了一些基本的理论知识,我们了解到的概念有: Custom Elements Shadow DOM Templates Slots 以及和这些概念相关的 ...
- Web Components 系列(五)—— 关于 Templates
前言 在之前介绍创建 Custom Elements 的代码中,有一个地方是比较繁琐的:Shadow DOM 中的每个子元素都是通过 document.createElement 方法创建的.就像下面 ...
- Web Components 系列(八)—— 自定义组件的样式设置
前言 通过前面的学习,对自定义组件的相关概念和知识点也有了一定了解,今天我们就来学习一下给自定义元素及其子元素设置样式的几种方法. 直接给自定义标签添加样式 index.html: <style ...
- Web Components系列(七) ——自定义组件的生命周期
前言 何谓"生命周期"?顾名思义,生命周期就是指一个物体从产生前到消亡后的整个过程,当然,不同物体的生命周期具体阶段划分可能不太一样. 我们在使用前端组件框架的时候,都知道每个组件 ...
- Web Components 系列(五)—— 详解 Slots
前言 熟悉 Vue 的同学应该都知道"插槽(slot)"的概念,通过使用插槽可以让页面内容的组织更加灵活. 在 Web Components 体系中也有插槽的概念,今天我们就来具体 ...
- Web Components 小榄
Web Components技术可以把一组相关的HTML.JS代码和CSS风格打包成为一个自包含的组件,只要使用大家熟悉的标签即可引入此组件.Web Components技术包括: Custom El ...
- Web API系列(三)统一异常处理
前面讲了webapi的安全验证和参数安全,不清楚的朋友,可以看看前面的文章,<Web API系列(二)接口安全和参数校验>,本文主要介绍Web API异常结果的处理.作为内部或者是对外提供 ...
- Web API系列(三):添加接口详细说明及测试
1.引言 前边两篇博客介绍了Web API的基本框架以及路由配置,这篇博客主要解决在前后端分离项目中,为前端人员提供详细接口说明的问题,主要是通过修改WebApi HelpPage相关代码和添加Web ...
- [译] 用 Shadow DOM v1 和 Custom Elements v1 实现一个原生 Web Component
原文地址:Make a Native Web Component with Custom Elements v1 and Shadow DOM v1 原文作者:Pearl Latteier 译文出自: ...
最新文章
- Properties类读写配置文件
- POS开发问题 - 多个弹出框的实现
- numpy练习100道题
- 802. 找到最终的安全状态
- python3异常_python3 异常处理
- Python测试开发django2.环境部署项目创建
- poj 3131 Cubic Eight-Puzzle 双向广搜 Hash判重
- i=i+1,i+=1与i++的区别
- Linux之lastb命令
- 所有windows的资料
- 单麦克纳姆轮的速度分解
- 《指针的编程艺术(第二版)》一2.3 三颗星星:表示三把钥匙
- mysql中的cube和rollup_【hive】cube和rollup函数
- 基于android的超级记事本,超级记事本基于设计论文
- nominal和ordinal 数据处理中四种基本数据类型
- edge 浏览器打开总跳向 hao.360
- 学习:SPWeb:Allusers、SiteUsers、Users和Sitegroups、Groups以及安全性编程
- Linux查看服务器硬件网卡cpu型号内存BIOS、主板型号信息
- api接口—闲鱼搜索的数据
- envi的三个窗口_ENVI显示窗口遥感影像显示遥感数据应用