如果在定义元素之前设置了相同名称的属性，则 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>