Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 785
dy_ Avatar asked Dec 06 '14 17:12

dy_


People also ask

What is CustomElementRegistry?

The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the window. customElements property.

How do I check if a custom element is defined?

The customElements. get() method can be used to check whether a given custom element has already been registered in the page. This can be used to find whether a given custom element name is available in the page or not, and prevent clashes with another custom element.

What is window customElements?

customElements. The customElements read-only property of the Window interface returns a reference to the CustomElementRegistry object, which can be used to register new custom elements and get information about previously registered custom elements.

What are autonomous custom elements?

There are two types of custom elements you can create: Autonomous custom element: Standalone elements; they don't inherit from built-in HTML elements. Customized built-in element: These elements inherit from — and extend — built-in HTML elements.


1 Answers

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.

like image 174
Aleksei Matiushkin Avatar answered Sep 18 '22 11:09

Aleksei Matiushkin