在前两篇文章中，我们学习了什么是 Custom Elements 以及如何创建和使用它们。在本篇文章中，我们将深入研究如何给 Custom Elements 添加 Upgraded 属性。
什么是 Upgraded 属性？
Upgraded 属性是一个布尔值，表示此元素是否已经成功地被注册为 Custom Element。
在前两篇文章中，我们已经定义了一个名为 "my-custom-element" 的 Custom Element：
<my-custom-element></my-custom-element>可以通过 JavaScript 代码将这个元素注册为 Custom Element：
class MyCustomElement extends HTMLElement { constructor() { super(); } } customElements.define('my-custom-element', MyCustomElement);
由于我们已经注册了这个元素，因此现在可以通过 "document.createElement()" 来创建一个 "my-custom-element" 的实例。
Upgraded 属性可以告诉我们这个元素是否已经被成功注册：
-- -------------------- ---- ------- ------------------ ------------------------------------ -------- ----- ------- - -------------------------------------- -- ------------------ - ------------------------------ --- ---- ------------ - ---------展开代码
如何给 Custom Elements 添加 Upgraded 属性？
要给 Custom Elements 添加 Upgraded 属性，我们可以使用 "connectedCallback()" 方法。这个方法会在元素第一次被插入到文档中时被调用。
我们可以在此方法中设置 Upgraded 属性为 "true"：
-- -------------------- ---- ------- ----- --------------- ------- ----------- - ------------- - -------- - ------------------- - ------------- - ----- - - ------------------------------------------ -----------------展开代码
现在，我们可以通过 "upgraded" 属性来判断元素是否已经被成功注册：
-- -------------------- ---- ------- ------------------ ------------------------------------ -------- ----- ------- - -------------------------------------- -- ------------------ - ------------------------------ --- ---- ------------ - ---------展开代码
示例代码
下面是一个完整的示例，演示如何注册一个 Custom Elements 并添加 Upgraded 属性：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- ------------- -------- ---------- ------- ------ ------------------ ------------------------------------ -------- ----- --------------- ------- ----------- - ------------- - -------- - ------------------- - ------------- - ----- - - ------------------------------------------ ----------------- ----- ------- - -------------------------------------- -- ------------------ - ------------------------------ --- ---- ------------ - --------- ------- -------展开代码
指导意义
添加 Upgraded 属性可以让我们更方便地管理和调试 Custom Elements。通过设置 Upgraded 属性为 "true"，我们可以清楚地知道哪些元素已经被成功地注册为 Custom Element，同时可以避免对未被注册的元素进行操作，从而提高代码的可维护性和稳定性。
此外，添加 Upgraded 属性还可以启发我们思考如何为 Custom Elements 添加更多的自定义属性和方法，以便更好地与其他代码进行交互，实现更丰富的功能。
综上所述，给 Custom Elements 添加 Upgraded 属性是一个非常实用和有效的方法，对于前端开发而言，具有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c508b66e1fc40e36e3d9e2
