为何无法有条件地继承自定义HTML元素类？

问题描述 #

在自定义元素继承场景中，若父元素CustomElementParent的定义被包裹在if (!customElements.get('custom-element-parent'))条件判断内（因父元素来自第三方脚本，无法移除该判断），当第三方已定义该元素时，当前脚本内的CustomElementParent类不会被声明，导致子类CustomElementChild继承时抛出「CustomElementParent未定义」错误。

原问题代码：

<script>
if (! customElements.get('custom-element-parent')) {
    class CustomElementParent extends HTMLElement {
        constructor() {
            super();
        }
    }

    customElements.define('custom-element-parent', CustomElementParent);
}

if (! customElements.get('custom-element-child')) {
    class CustomElementChild extends CustomElementParent {
        constructor() {
            super();
            alert('test');
        }
    }

    customElements.define('custom-element-child', CustomElementChild);
}
</script>

<custom-element-child></custom-element-child>

解决方案 #

通过customElements.get()方法从自定义元素注册表中获取父类构造函数，无论父类是当前脚本还是第三方脚本定义的，确保继承时父类始终存在。

修改后的代码：

<script>
// 仅在父元素未被定义时，自行定义父元素
if (! customElements.get('custom-element-parent')) {
    class CustomElementParent extends HTMLElement {
        constructor() {
            super();
        }
    }
    customElements.define('custom-element-parent', CustomElementParent);
}

// 从注册表中获取父类构造函数，用于子类继承
const CustomElementParent = customElements.get('custom-element-parent');

if (! customElements.get('custom-element-child')) {
    class CustomElementChild extends CustomElementParent {
        constructor() {
            super();
            alert('test');
        }
    }
    customElements.define('custom-element-child', CustomElementChild);
}
</script>

<custom-element-child></custom-element-child>

原理说明 #

• customElements.get('元素标签名')会返回对应自定义元素的类构造函数，不管这个类是由第三方脚本还是当前脚本注册的。
• 显式从注册表中获取父类，避免了依赖条件块内的类声明，彻底解决了条件定义导致的父类未声明问题。

内容的提问来源于stack exchange，提问作者Timothy Fisher