Question

我正在阅读有关最佳做法here的文章。我遇到了以下几行：

开发人员可能会在元素的定义加载之前尝试在其上设置属性。如果开发人员正在使用一个框架来处理加载组件，将其插入页面并将其属性绑定到模型，则尤其如此。

解决此问题的建议解决方案是：

_upgradeProperty(prop) {
  if (this.hasOwnProperty(prop)) {
    let value = this[prop];
    delete this[prop];
    this[prop] = value;
  }
}

我一直在尝试了解发生这种情况的情况，并试图了解这段代码如何解决此问题。我试图在附近找到任何参考资料，但无法找到类似的东西。

请有人解释这种情况，我们要在这里解决什么问题。

Answer 1

在调用customElements.define('custom-tag', CustomElement)之前，Web Components不会完全初始化元素。但是，页面呈现后，任何<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();
  }
}

然后有可能在设置器存在之前设置属性，这意味着原始值直接保存到实例的someProperty属性中，而不是转换为小写并保存为_someProperty。在定义了setter之后，删除属性并重新分配它，可以确保正确处理该值（在这种情况下，将其设置为小写并保存在正确的位置）。

使属性变得懒惰

1 个答案:

为什么会这样？

代码片段如何解决问题？