如果在定义元素之前设置了相同名称的属性，则 CustomElement 的初始化会删除类方法

Question

自定义元素可以异步初始化，例如在延迟加载其定义类之后。

让我们看看这个例子，我们在 DOM 中有一个尚未初始化的元素：

<component-with-async-init></component-with-async-init>

在初始化之前，我们设置了value这个元素的一个属性：

querySelector('component-with-async-init').value = "GETTERS SETTERS ARE KILLED"

然后我们通过将它定义为自定义元素来初始化这个元素。正如你所看到的，它的定义类有value属性的getter 和 setter 。

class ComponentWithAsyncInit extends HTMLElement{

    static get is() {

        return 'component-with-async-init'

    }

    get value(){

        console.log("Getting value")

        return "VALUE FROM GETTER"

    }

    set value(v){

        console.log("Setting value")

    }

}

window.customElements.define(ComponentWithAsyncInit.is, ComponentWithAsyncInit);

Getter 和 setter（或任何方法）现在被杀死，如您所见：

querySelector('component-with-async-init').value //"GETTERS SETTERS ARE KILLED"

我在最新的 Safari、Firefox 和 Chrome 中观察到了这种行为，其他未经测试。此问题会影响 Polymer 和 Lit-Element 库以及纯自定义元素。似乎它在每个浏览器中的工作方式都相同。

问题：这真的是预期的行为吗？如果在元素定义之前设置了属性，则 Getter 和 Setter 以及任何方法都会被清除。如果是，那么解决方法是什么，因为我们通常无法控制何时设置元素值

片段：

document.querySelector('component-with-async-init').value = "SETTERS GETTERS KILLED"

document.querySelector('component-with-async-init').getSomeValue = "GET SOME VALUE KILLED"

class ComponentWithAsyncInit extends HTMLElement{

    static get is() {

        return 'component-with-async-init'

    }

    get value(){

        console.log("Getting value")

        return "VALUE FROM GETTER"

    }

    set value(v){

        console.log("Setting value")

    }

    getSomeValue(){

        return "SOME VALUE"

    }

}

window.customElements.define(ComponentWithAsyncInit.is, ComponentWithAsyncInit);

console.log("getSomeValue method:")

console.log(document.querySelector('component-with-async-init').getSomeValue)            

console.log("Reading value:")

console.log(document.querySelector('component-with-async-init').value)

<component-with-async-init></component-with-async-init>