前言上一篇介绍了WebComponents的相关概念，知道它是浏览器原生支持“组件化”的一种方式，知道它的技术构成适用于：CustomElementsShadowDOMHTMLtemplates今天，我们将学习其中的一项技术——CustomElement的一些相关知识。CustomElements的意义WebComponents标准最重要的特性之一是它使开发人员能够将HTML页面的功能封装为自定义元素（customtags），而在过去，开发人员不得不编写很多冗长的、深度嵌套的标签实现相同的页面功能。自定义元素是Web组件化的基础和核心。自定义元素的分类根据是否继承基础HTML元素，自定义元素分为两类。自治自定义元素是不从其他内置HTML元素继承的独立元素。您可以直接以HTML标记的形式编写它们以在页面上使用。例如或document.createElement("my-card")。自定义的内置元素继承自基本的HTML元素。创建时，必须指定需要扩展的元素。使用时需要先编写基本元素标签，通过is属性指定自定义元素的名称。例如或document.createElement("p",{is:"my-card"})。CustomElementRegistry对象我们已经了解了自定义标签的概念等相关知识，那么在实际开发中如何使用自定义标签呢？这里需要介绍一下自定义元素的关键对象——CustomElementRegistry对象。要获取它的实例，请使用window.customElements属性。它的主要功能是：为页面注册自定义标签，获取注册的自定义元素的相关信息下面我们来看一下CustomElementRegistry对象的相关方法：可以看到，CustomElementRegistry对象包含四个方法：CustomElementRegistry.define()自定义元素注册表。get()CustomElementRegistry.upgrade()CustomElementRegistry.whenDefined()下面介绍CustomElementRegistry对象的各个方法。CustomElementRegistry.define()用于定义（创建）自定义标签。语法如下：customElements.define(name,constructor,options);参数解析：name自定义标签名称。注意：不能是单字，中间必须有破折号，如：my-card。constructor自定义元素构造函数，可以控制元素的表现形式、行为和生命周期。options是一个包含extends属性的配置对象，它是一个可选参数。它指定创建的元素继承自哪个内置元素，并且可以继承自任何内置元素。返回值未定义。用法示例：//声明一个自定义标签构造函数类classMyCardextendsHTMLParagraphElement{constructor(){super();...}}//注册自定义标签customElements.define('my-card',MyCard,{extends:'p'});CustomElementRegistry.get()该方法用于返回之前定义的自定义标签的构造函数。语法如下：constructor=customElements.get(name);name表示要获取的自定义标签构造器的标签名称，其格式也应该是破折号连接的单词。具有指定名称的自定义元素的构造函数，如果不存在具有该名称的自定义元素定义，则为undefined。用法示例：//调用get方法customElements.get("my-card");//MyCard类扩展HTMLParagraphElement{//constructor(){//super();//}//}customElements.get("MyCard");//undefinedCustomElementRegistry.upgrade()此方法将更新根子树中包含影子DOM的所有自定义元素，甚至在将它们加载到主文档之前。语法如下：customElements.upgrade(root);root表示具有要升级的阴影后代元素的Node实例。如果没有可以提升的后代元素，则不会抛出错误。它的返回值是未定义的。不调用升级方法：constel=document.createElement("my-card");classMyCardextendsHTMLElement{}customElements.define("my-card",MyCard);console.log(elinstanceofMyCard);//false调用升级方法：constel=document.createElement("my-card");classMyCardextendsHTMLElement{}customElements.define("my-card",MyCard);customElements.upgrade(el);console.日志（elinstanceofMyCard）；//trueCustomElementRegistry.whenDefined()返回一个承诺，该承诺将在使用给定名称定义自定义元素时实现。如果定义了这样的自定义元素，则立即履行返回的承诺。语法如下：Promise<>customElements.whenDefined(name);name也是自定义标签的名称。示例1：classMyCardextendsHTMLParagraphElement{constructor(){super();}}customElements.whenDefined("my-card").then(()=>{console.log(`my-cardisregistered`);});console.log("beforemy-cardregistration");customElements.define("my-card",MyCard,{extends:"p"});console.log("aftermy-cardregistration");//我卡注册前//我卡注册后//my-cardisregistered如果再次执行下面的代码，resolve方法会立即执行：customElements.whenDefined("my-card").then((res)=>{console.log(res);console.log(`my-cardisregistered`);});//my-cardisregistered总结以上是关于自定义元素的一些知识点，后续会添加自定义标签生命周期函数等等。~~本文到此结束，感谢阅读！~学习有趣的知识，认识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者王隐，我的公众号是《编程三昧》，欢迎关注，希望大家多多指教！
