Полифилл, который может поддерживать использование пользовательских элементов спецификации 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 даст быстрое решение для перехода на спецификацию пользовательских элементов без функциональных пробелов.