Search code examples
javascripthtmlw3cweb-componentcustom-element

How to get list of registered custom elements


I'm trying to detect whether a custom element with a specific name was registered or not. Is there a way to make such check?

Or is there a way to get list of registered custom elements?

I do document.registerElement, but what else is there? Is it one-way API?


Solution

  • There is a way to check whether an element was registered. Registered elements have their own constructors, while unregistered ones would use plain HTMLElement() for constructor (or HTMLUnknownElement() whether the name is not valid, but this is out of scope of the question):

    document.registerElement('x-my-element');
    document.createElement('x-my-element').constructor
    //⇒ function x-my-element() { [native code] }
    document.createElement('x-my-element-not-registered').constructor
    //⇒ function HTMLElement() { [native code] }
    

    That said, the checker might look like:

    var isRegistered = function(name) {
      return document.createElement(name).constructor !== HTMLElement;
    }
    

    Or, with syntactic sugar:

    String.prototype.isRegistered = function() { 
      return document.createElement(this).constructor !== HTMLElement; 
    }
    'x-my-element'.isRegistered()
    //⇒ true
    'xx-my-element'.isRegistered()
    //⇒ false
    

    The mostly careful version:

    String.prototype.wasRegistered = function() { 
      switch(document.createElement(this).constructor) {
        case HTMLElement: return false; 
        case HTMLUnknownElement: return undefined; 
      }
      return true;
    }
    'x-my-element'.wasRegistered()
    //⇒ true
    'xx-my-element'.wasRegistered()
    //⇒ false
    'xx'.wasRegistered()
    //⇒ undefined
    

    There is no way to access a list of registered elements, AFAIK.

    BTW, I still think that the try-catched registration (as proposed by @stephan-muller) suits your needs better.