Uncaught DOMException: не удалось выполнить 'define' для 'CustomElementRegistry': «[объект HTMLElement]» не является допустимым именем пользовательского элемента

Question

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

class button extends HTMLElement{
    constructor(){
        super();
        const shadow = this.attachShadow({mode: 'open'});
        const button = document.createElement('button');
        button.style.cssText = 'display:block';
        button.textContent = super.textContent;
        shadow.appendChild(button);
    }
}
var Ω = (function () {

	'use strict';

	/**
	 * Create the constructor
	 * @param {String} selector The selector to use
	 */
	var Constructor = function (selector) {
		if (!selector) return;
		if (selector === 'document') {
			this.elems = [document];
		} else if (selector === 'window') {
			this.elems = [window];
		} else {
			this.elems = document.querySelectorAll(selector);
		}
	};

    /**
	 * Run a callback on each item
	 * @param  {Function} callback The callback function to run
	 */
	Constructor.prototype.each = function (callback) {
		if (!callback || typeof callback !== 'function') return;
		for (var i = 0; i < this.elems.length; i++) {
			callback(this.elems[i], i);
		}
		return this;
	};

	/**
	 * 
	 * @param  {String} className 
	 */
	Constructor.prototype.register = function (className) {
		this.each(function (item) {
			customElements.define(item, className);
		});
		return this;
	};
    /**
	 * Instantiate a new constructor
	 */
	var instantiate = function (selector) {
		return new Constructor(selector);
	};

	/**
	 * Return the constructor instantiation
	 */
	return instantiate;

})();
Ω('lol-foo').register(button);

<p>Expect a button down below</p>
<lol-foo>Hey</lol-foo>

Предполагалось, что он возьмет имя из первого метода (здесь лол-фу) и добавит путь к классу и определит его, но, похоже, что-то не так написанои [объект HTMLElement] пропущен.

Ваша помощь поможет custags.js поможет добавить селектор типа jQuery ($).Ответы приветствуются.

Answer 1

Проблема заключается в том, что вы предоставляете объект HTMLElement для первого аргумента define(), когда вместо этого он ожидает пользовательский элемент name в виде строки.Для справки это имя должно включать дефис и быть в нижнем регистре.Как таковой попробуйте это:

customElements.define(item.tagName.toLowerCase(), className);

Вот рабочий пример:

class button extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({
      mode: 'open'
    });
    const button = document.createElement('button');
    button.style.cssText = 'display:block';
    button.textContent = super.textContent;
    shadow.appendChild(button);
  }
}
var Ω = (function() {
  'use strict';

  /**
   * Create the constructor
   * @param {String} selector The selector to use
   */
  var Constructor = function(selector) {
    if (!selector) return;
    if (selector === 'document') {
      this.elems = [document];
    } else if (selector === 'window') {
      this.elems = [window];
    } else {
      this.elems = document.querySelectorAll(selector);
    }
  };

  /**
   * Run a callback on each item
   * @param  {Function} callback The callback function to run
   */
  Constructor.prototype.each = function(callback) {
    if (!callback || typeof callback !== 'function') return;
    for (var i = 0; i < this.elems.length; i++) {
      callback(this.elems[i], i);
    }
    return this;
  };

  /**
   * 
   * @param  {String} className 
   */
  Constructor.prototype.register = function(className) {
    this.each(function(item) {
      customElements.define(item.tagName.toLowerCase(), className);
    });
    return this;
  };
  /**
   * Instantiate a new constructor
   */
  var instantiate = function(selector) {
    return new Constructor(selector);
  };

  /**
   * Return the constructor instantiation
   */
  return instantiate;
})();

Ω('lol-foo').register(button);

<p>Expect a button down below</p>
<lol-foo>Hey</lol-foo>

Стоит также отметить, что второй аргумент define() является конструктором класса, поэтому имя аргумента className является неправильным.Однако в этом примере его значение является правильным.

Более подробную информацию о CustomElementRegistry.define() можно найти по MDN

.