未捕获的DOMException:无法在'CustomElementRegistry'上执行'define':此构造函数已与此注册表一起使用

时间:2019-09-29 13:05:08

标签: javascript jquery dom customization domexception

这是完整的代码:-

class code extends HTMLElement{
    constructor(){
        super();
        const shadow = this.attachShadow({
            mode: 'open'
          });
        const code = document.createElement('code');
        code.textContent = super.textContent;
        shadow.appendChild(code);
    }
}
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;
    };
  
    
    Constructor.prototype.register = function(className) {
      this.each(function(item) {
        customElements.define(item.tagName.toLowerCase(), className);
      });
      return this;
    };

    Constructor.prototype.css = function(style){
        this.each(function(item) {
            item.style.cssText = style;
          });
          return this;
    }
    Constructor.prototype.value = function(){
        this.each(function(item) {
            const val = item.value;
            return val;
          });
          return this;
    }
    Constructor.prototype.load = function(fn){
        window.onload = fn;
        return fn;
    }
    /**
     * Instantiate a new constructor
     */
    var instantiate = function(selector) {
      return new Constructor(selector);
    };
  
    /**
     * Return the constructor instantiation
     */
    return instantiate;
  })();
  Ω('lol-bar').register(code);
Ω('check-1').register(code);
<lol-bar>Hey</lol-bar><br />
<check-1>This should look like the above one</check-1>

我曾期望这将以相同的格式输出标签lol-bar和check-1,但是这有点儿间接地说我只允许使用一次构造函数,因此进一步的定义无法实现。有人请解决这个问题,让我摆脱这个悖论。 帮助和答案表示赞赏。对custags.js(我的一个开源项目)的开发将有很大帮助。

0 个答案:

没有答案