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?
The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the window. customElements property.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With