HTML DOM customElements get() 方法(1)

📌 相关文章

📜 HTML DOM customElements get() 方法(1)

📅 最后修改于: 2023-12-03 15:15:33.543000 🧑 作者: Mango

HTML DOM customElements get() 方法

简介

customElements.get() 方法是Web组件API的一部分，用于检索已定义的自定义元素。它允许开发人员按名称检索自定义元素类并返回其构造函数。

语法

customElements.get(name);

参数

name：String类型，表示自定义元素的名称。

返回值

返回值是自定义元素的构造函数，如果找不到该名称类型，则返回 undefined。

示例

<html>
  <head>
    <title>customElements.get()应用示例</title>
  </head>
  <script>
    customElements.define('hello-world', class HelloWorld extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
          <h1>Hello World!</h1>
        `;
      }
    });
    
    setTimeout(() => {
      const HelloWorld = customElements.get('hello-world');
      const helloWorld = new HelloWorld();
      document.body.appendChild(helloWorld);
    }, 2000);
  </script>
  <body>
    <p>2秒钟后创建一个自定义元素 Hello World!</p>
  </body>
</html>

上述代码定义了一个名为 hello-world 的自定义元素，并在 setTimeout 延时时间到达后使用 customElements.get() 方法检索该元素，如果检索返回 undefined 则不进行任何操作，如果得到了元素的构造函数则实例化该元素，并将其附加到文档体中。这个示例代码效果是：页面打开后，2秒钟后页面新增一个内容为 "Hello World!" 的自定义元素。

注意事项

在使用 customElements.get() 之前，需要确保已经使用 customElements.define() 定义了该名称的自定义元素类。
customElements.get() 可以检索已定义的内置元素（如 div、input等），但此类元素不能被重新定义，也不能触发 constructor 方法。