为什么我不能有条件地从自定义 HTML 元素类扩展？

Question

当我尝试在

CustomElementParent

中扩展它时，下面的代码片段会抛出一个错误，即

CustomElementChild

未定义。

当我删除

! customElements.get('custom-element-parent')

检查时，它就起作用了。

就我而言，

CustomElementParent

位于第三方脚本中，因此我实际上无法删除 if 语句。

我猜这是一个有条件定义类的问题。如果有条件定义这个类，有什么方法可以扩展它吗？

<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>

Answer 1

范围。类有作用域，与变量相同。

if (true) {
    let x = 5;
}

// you can’t access `x` here

（我们不谈论

var

。重点是，

class

的作用类似于

let

。）

如果您无法更改

CustomElementParent

的作用域方式，并且无法将代码放入其作用域中，则无法以这种方式访问它。一种选择可能是创建该类型的元素来访问它：

const CustomElementParent = document.createElement('custom-element-parent').constructor;

class CustomElementChild extends CustomElementParent {
    constructor() {
        super();
        alert('test');
    }
}

customElements.define('custom-element-child', CustomElementChild);