时间戳

首页 > 解决方案 > 如果设置了 type="module"，为什么 childNodes 在 connectedCallback 中返回不同的值？

javascript - 如果设置了 type="module"，为什么 childNodes 在 connectedCallback 中返回不同的值？

问题描述

调用this.childNodes自定义元素connectedCallback将返回不同的值，具体取决于是否type="module"在脚本标记中设置。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script>

    class CustomElement extends HTMLElement {
      connectedCallback() {
        console.log(this.childNodes);
      }
    }
    customElements.define('custom-element', CustomElement);

  </script>
</head>

<custom-element><div></div></custom-element>

</html>

在我的浏览器中，记录了以下内容，表示有 0 个子节点：

NodeList []

但如果我type="module"在脚本标签中设置，则会记录 1 个子节点：

NodeList [ div ]

我能够在 Firefox 90 和 Chrome 92 上复制这种行为。

为什么设置type="module"会改变返回值childNodes？

标签： javascripthtmlweb-componentes6-modulescustom-element

解决方案

因为模块强制脚本在整个 DOM 被解析后运行。

在 SO 上搜索 settimeout 和 connectedcallback

推荐阅读