javascript - 在定义后修改自定义元素类

Question

是否可以在注册后修改自定义元素/网络组件类？这不是我通常(或永远)不想在生产代码中做的事情，但在制作原型(prototype)或实现代码修补工具以进行开发时，它会很有用。到目前为止，这是我尝试过的，但没有成功:

document.body.appendChild(document.createElement('foo-bar')) // empty element

class FooBar extends HTMLElement {
  connectedCallback () {
    this.textContent = 'foo bar'
  }
}

customElements.define('foo-bar', FooBar) // element shows "foo bar"

FooBar.protoype.connectedCallback = function () {
  this.textContent = 'foo bar 2'
}

document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2"

customElements.get('foo-bar').protoype.connectedCallback = function () {
  this.textContent = 'foo bar 2'
}

document.body.appendChild(document.createElement('foo-bar')) // element shows "foo bar", not "foo bar 2"

class FooBar2 extends HTMLElement {
  connectedCallback () {
    this.textContent = 'foo bar 2'
  }
}

customElements.define('foo-bar', FooBar2) // Exception thrown, 'foo-bar' already defined

总而言之，修改最初传递给 CustomElementsRegistry 的类没有任何效果。分配给注册表中内容的原型(prototype)无效。尝试将新类分配给注册表中的元素是不可能的，因为会抛出异常。所有这三种行为都与我在几乎所有其他 JavaScript API 的每个方面的经验背道而驰。除非将某物设置为不可配置，否则无法改变某物是极不寻常的，无论是好是坏。但是，当我检查对象是否可配置时，运行时说它们是可配置的!

有谁知道在定义自定义元素定义后对其进行修改/扩充的方法吗？

Answer 1

标签一旦定义就无法更改，似乎它在定义时拉入了类。

我找到了一种通过将包装类作为构造函数来动态重新加载自定义元素背后的代码的方法，我现在可以对自定义元素进行热重新加载，不再需要刷新应用程序 - 包装器将需要处理属性冒泡等

基本上你需要依赖以下几个部分

1. 了解哪些元素未定义，最好在您对 DOM 执行更改时调用，或者您可以放置​​一个 setInterval 用于开发。document.querySelectorAll(':not(:defined)')

2. 定义内联自定义元素，这样您就可以对所有自定义元素使用相同的构造函数。 customElements.define(elementName, class extends HTMLElement {...

---

document.querySelectorAll(':not(:defined)').forEach((ele, k) => {
        let elementName = ele.tagName.toLowerCase();
        if (!customElements.get(elementName)) {

            //defining custom element
            customElements.define(elementName, class extends HTMLElement {
                constructor() {
                    super();
                }

                disconnectedCallback() {
                    if (this._elementClass) {
                        this._elementClass.disconnectedCallback()
                    }
                }

                connectedCallback() {

                    let element = (this.tagName).toLowerCase();

                    //reload the class variable here eg: importScript/getScripts 
                    //dependent on whatever variable you want eg: cache id or 
                    //then make calls to the customElement class
                    this._elementClass = new NodeTest(this);
                    this._elementClass.connectedCallback(); 


...


var NodeTest = class {

    constructor(ele) {
        this.ele = ele;
    }

    disconnectedCallback() {

    }

    connectedCallback() {

        this.render();
    }

    render() {
        this.ele.innerHTML = '<h1>hheee</h1>';
    }
}