方法

2023年08月15日

柏拉文

越努力，越幸运

一、customElements.define()

---

customElements.define() 方法定义了一个自定义元素。你可以创建两种类型的自定义元素:

• 自主定制元素: 独立元素; 它们不会从内置 HTML 元素继承。

• 自定义内置元素: 这些元素继承自 - 并扩展 - 内置 HTML 元素

1.1 语法

customElements.define(name, constructor, options);

• name: 自定义元素名

• constructor: 自定义元素构造器, 表示所创建的元素名称的符合 DOMString 标准的字符串。注意，custom element 的名称不能是单个单词，且其中必须要有短横线。

• options: 控制元素如何定义。目前有一个选项支持:

  • extends: 指定继承的已创建的元素。被用于创建自定义元素

1.2 用法

自主定制元素: 自主自定义元素的构造函数必须扩展 HTMLElement。

<custom-element id="3" url="http"></custom-element>

<script>
    class CustomElement extends HTMLElement{
    constructor(){
        super();

        const shadow = this.attachShadow({ mode: "open" });
        const wrapper = document.createElement('div');
        wrapper.innerHTML = "自主定制元素"

        console.log(this.getAttribute('id'));
        console.log(this.hasAttribute('url'))

        shadow.appendChild(wrapper);
    }
    }

    customElements.define('custom-element',CustomElement);
</script>

自定义内置元素

<p is="custom-element"></p>

<script>
    class CustomElement extends HTMLParagraphElement{
        constructor(){
            super();

            const shadow = this.attachShadow({ mode: "open" });
            const wrapper = document.createElement('div');
            wrapper.innerHTML = "自定义内置元素"

            console.log(this.getAttribute('id'));
            console.log(this.hasAttribute('url'))

            shadow.appendChild(wrapper);
        }
    }

    customElements.define('custom-element',CustomElement, {extends: 'p'});
</script>

二、customElements.get()

---

customElements.get() 方法返回以前定义自定义元素的构造函数。

2.1 语法

constructor = customElements.get(name);

• name: 想要返回引用的构造函数的自定义元素的名字。

• constructor: 指定名字的自定义元素的构造函数，如果没有使用该名称的自定义元素定义，则为 undefined。

三、customElements.upgrade()

---

customElements.upgrade() 将更新节点子树中所有包含阴影的自定义元素，甚至在它们连接到主文档之前也是如此。

3.1 语法

customElements.upgrade(root);

• root: 待升级的包含阴影的派生元素节点 。如果没有可升级的派生实例，则不会抛出异常。

四、customElements.whenDefined()

---

customElements.whenDefined() 为 当一个元素被定义时 CustomElementRegistry 中的方法 whenDefined() 接口返回 Promise.

4.1 语法

const promise = customElements.whenDefined(name);

• name: 自定义元素的名称

• promise: 当自定义元素被定义时一个 Promise 返回{jsxref("undefined")}}. 如果自定义元素已经被定义，则 resolve 立即执行。