我正在阅读有关最佳实践的文章。我遇到了以下几行：
开发人员可能会尝试在加载元素定义之前在元素上设置属性。如果开发人员使用的框架处理加载组件、将它们插入页面并将其属性绑定到模型，则尤其如此。
解决这个问题的建议解决方案是：
_upgradeProperty(prop) {
if (this.hasOwnProperty(prop)) {
let value = this[prop];
delete this[prop];
this[prop] = value;
}
}
我一直在尝试理解发生这种情况的场景，并尝试了解这段代码片段如何解决这个问题。我试图在周围找到任何参考资料，但找不到类似的东西。
请有人解释一下这种情况以及我们在这里试图解决的问题。
Web组件在你调用customElements.define('custom-tag', CustomElement)之前不会完全初始化你的元素;但是，一旦页面呈现，任何<custom-tag>都会作为HTMLUnknownElement存在于DOM中。因此，在页面呈现和调用customElements.define(...)之间的时间段内，有人可能会调用类似以下内容：
document.querySelector('custom-tag').someProperty = someValue
这将修改尚未初始化的CustomElement的属性。
为什么会这样？
我认为这很可能是将Web组件与前端框架(Angular，Vue等)一起使用的副作用。这些框架通常具有在呈现后发生的初始化代码，并且在某些情况下，用户可能没有足够的控制权来阻止框架在 Web 组件之前初始化。
代码片段如何解决问题？
片段函数_upgradeProperty()应该在connectedCallback()中调用，在Web组件完全定义并附加到现有元素之后调用。如果您的班级中有任何自定义二传手，例如：
class CustomElement {
set someProperty(value) {
this._someProperty = value.toLowerCase();
}
}
然后，该属性可能是在 setter 存在之前设置的，这意味着原始值直接保存到实例的someProperty属性中，而不是转换为小写并保存到_someProperty中。在定义资源库后删除属性并重新分配它可确保正确处理值(在本例中，将其设置为小写并保存在正确的位置)。