覆盖属性时自定义元素升级前使用捕获

Question

我最近遇到了以下情况，正在寻找一个非常棘手的不当行为的建议/优雅的解决方案，恕我直言。

假设我在文件bible-reference.js 中创建了以下自定义元素定义：

class BibleReference extends HTMLElement {
    constructor() {
        super();
    }
    get value() { return this._value; }
    set value(newValue) { this._value = newValue; }
}

customElements.define('bible-reference', BibleReference);

我们已经定义了我们的新元素，并且我们有一个value 属性getter/setter 来与这个元素的值进行交互。请注意，getter/setter 将在元素的 prototype 对象上找到，这本身是可以肯定的。

现在，让我们回顾一下我遇到的以下 HTML 布局：

<bible-reference id='elem-1'></bible-reference>
<script src="starter.js"></script>
<script src="bible-reference.js"></bible-reference>

诀窍在于starter.js 内容。如果这个脚本包含下面的代码，事情就会被破坏：

let br = document.getElementById('elem-1');
br.value = 'some value';

value 设置在 non-upgraded 元素上，因此调用的不是 getter/setter，而只是向元素添加了一个新属性。在对象本身上设置此属性，即使在升级完成后，value 的 getter/setter 也不再可访问 用于 this 元素实例，因为存在在到达原型之前有一个（覆盖的）value 属性可用。

我同时通过在构造函数中添加 delete this.value; 解决了这个问题，但是......真是个 hack！

感谢任何见解。

Answer 1

解决此问题的另一种方法是在 constructor() 的闭包中定义 value 属性。

<bible-reference id='elem-1'></bible-reference>
<script>
  let br = document.getElementById('elem-1');
  br.value = 'Genesis 1:1';

  class BibleReference extends HTMLElement {
    constructor() {
      super()
      var _value = this.value
      Reflect.defineProperty(this, 'value', {
        get: () => _value,
        set: newValue => _value = newValue        
      })
    }
  }
  customElements.define('bible-reference', BibleReference);
  
  console.log(br.value)
</script>

但我猜你会说这是一个糟糕的 hack ;-) 无论如何，我更喜欢你的 delete 解决方案。