Полифилл, который может поддерживать использование пользовательских элементов спецификации v0 со спецификацией v1. С прекращением поддержки спецификации пользовательских элементов v0 в основных веб-браузерах, таких как Google Chrome и Microsoft Edge, пользовательские элементы, созданные с использованием спецификации v0, привлекли все внимание всех разработчиков.

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

(scope => {
function registerElement(name, implementation) {
      
      class WrapEl extends HTMLElement {
        constructor(...rest) {
          super();
        }
        connectedCallback(...rest) {
        console.log('am connected');
        if (!this._isInitialized) {
          this.createdCallback && this.createdCallback.call(this, ...rest);
          this._isInitialized = true;
        }
          this.attachedCallback && this.attachedCallback.call(this, ...rest);
        }
        disconnectedCallback(...rest){
         this.detachedCallback && this.detachedCallback.call(this, ...rest);
        }
      }
Object.assign(WrapEl.prototype, implementation.prototype);
customElements.define(name, WrapEl);
    }
if (!document.registerElement) {
      document.registerElement = registerElement;
    }
})(document);

Небольшое изменение, требуемое от существующих элементов, заключается в добавлении статического свойства visibleAttributes для обнаружения изменений атрибутов в attributeChangedCallback.

Вот пример объявления и использования компонентов v0.

var proto = Object.create(HTMLElement.prototype);
  proto.attachedCallback = function() {
    this.innerHTML = 'fun';
  }
proto.observedAttributes = ['attr1', 'attr2'];
proto.attributeChangedCallback = function(){
//Do something to check attribute value changes
//Attributes 'attr1' and 'attr2' only get value changes here
//Any other attribute changes will not notified. 
};
document.registerElement('aux-com', {
    prototype: proto
  });

Вывод:

Всегда лучше иметь полифилл для работы, чем переписывать все с нуля. Использование poyfill даст быстрое решение для перехода на спецификацию пользовательских элементов без функциональных пробелов.