Изменение класса пользовательского элемента после его определения

Невозможно изменить тег после его определения, кажется, что он извлекает класс при определении.

Я нашел способ динамической перезагрузки кода за пользовательским элементом, поместив класс-оболочку в качестве конструктора, теперь у меня есть горячая перезагрузка для пользовательских элементов, больше нет обновлений приложений - оболочке нужно будет обрабатывать пузырьки атрибутов и т. д.

в основном вам нужно полагаться на следующие части

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>';
    }
}

Я думаю, что было бы сложно изменить поведение тега, они (разработчик браузера) могут подумать, что один тег должен быть определен только один раз.

Я пробовал изменить теневой корень, это сработало. Если вы хотите создать шаблон для своего пользовательского тега, теневой корень поможет.

let customTable = document.registerElement('custom-table', {
  prototype: Object.create(HTMLElement.prototype, {
    createdCallback: {
      value: function() {
        let shadowRoot = this.createShadowRoot();
        window.shadowRoot = shadowRoot
        let template = document.querySelector('#custom-table');
        shadowRoot.appendChild(template.content.cloneNode(true));
      }
    }
  })
});

let i = 0
setInterval(() => {
  shadowRoot.append(`${i++}s past `)
}, 1000)

table {
  height: 100px;
  width: 100px;
  background-color: black;
}

<template id="custom-table">
  <style>
    table {
    }
  </style>
  <table>
    <thead>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>P</td>
        <td>P</td>
        <td>A</td>
        <td>P</td>
      </tr>
    </tbody>
  </table>
</template>
<custom-table></custom-table>
<table>
</table>

Использование MVVM - еще один вариант, они также могут создавать шаблоны, но для модификации в реальном времени может потребоваться ручной запуск повторного рендеринга.

• angular (машинопись, нужно скомпилировать)
• реагировать (jsx, нужно скомпилировать)
• угловой 1.x
• вью

Я реализовал очень грубый прототип, который позволяет вам customElements.define() использовать CustomElements несколько раз. Это дает вам возможность перезаписывать любое использование вашего пользовательского элемента в будущем.

Изменение существующего класса для CustomElement имеет тот недостаток, что вы потеряете сопоставление между фактическим CustomElement и его фактическим классом, и это может быть причиной, почему это не так. возможный...

Загрузив описанную выше реализацию прототипа, вы можете сделать следующее:

// add <foo-bar> to the DOM
// define it once
customElements.define('foo-bar', class extends HTMLElement {
  constructor() { super() };
  connectedCallback() { this.textContent = 'foo bar'; }
}
// ...
// and define it again :)
customElements.define('foo-bar', class extends HTMLElement {
  constructor() { super() };
  connectedCallback() { this.textContent = 'foo bar 2'; }
}
// and add it <foo-bar> again to the DOM to get the new impl

Мне это нужно для горячей перезагрузки, у меня есть решение, но оно использует clojurescript. В конце код скомпилирован в javascript, так что, возможно, стоит взглянуть: https://clojureverse.org/t/hot-reloading-custom-elements-web-components/5964