Custom Elements 是 Web Components 的一部分，它允许我们创建自定义 HTML 元素。当我们实例化一个自定义元素时，我们可能会遇到一个常见的问题，即子元素无法获取父元素。这个问题的解决方法需要一些深度和学习，本文将为大家提供详细的指导。
问题描述
在 Custom Elements 中，我们可以使用 connectedCallback() 方法来监听元素的实例化。在这个方法中，我们可以访问元素的子元素，但是此时子元素无法访问其父元素。这是因为在元素实例化后，子元素还没有被添加到 DOM 树上，所以无法获取其父元素。
<my-custom-element> <div id="child"></div> </my-custom-element>
class MyCustomElement extends HTMLElement {
connectedCallback() {
console.log(this); // MyCustomElement
console.log(this.querySelector('#child')); // null
}
}
customElements.define('my-custom-element', MyCustomElement);解决方法
为了让子元素能够获取其父元素，我们需要在 connectedCallback() 方法中添加一个微任务（Microtask），在微任务中访问子元素，这样就可以确保子元素已经被添加到 DOM 树上。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------------- -
------------------------- -- -
------------------ -- ---------------
------------------------------------------ -- ---- -----------------
---
-
-
------------------------------------------ -----------------这里使用了 Promise.resolve() 来创建一个微任务。在微任务中访问子元素时，它们已经被添加到 DOM 树上，可以正常地获取其父元素。
示例代码
下面是一个完整的示例代码，展示了如何在 Custom Elements 中解决子元素无法获取父元素的问题。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
------------- -------- ----------
-------
------
-------------------
---- -----------------
--------------------
------- --------------------------------------
-------
--------- -------------------- ---- -------
-- --------------------
----- --------------- ------- ----------- -
------------------- -
------------------------- -- -
------------------ -- ---------------
------------------------------------------ -- ---- -----------------
---
-
-
------------------------------------------ -----------------结论
Custom Elements 是 Web Components 的重要组成部分，它可以让我们创建自定义 HTML 元素。在元素实例化时，子元素无法获取其父元素，但是我们可以使用微任务来解决这个问题。本文提供了详细的解决方法和示例代码，希望能够帮助大家更好地使用 Custom Elements。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675745866c15453263095753