safeRegisterElement

For the project I'm working on I'm building web components that sometimes require other components to build their UI. For example, the theremin-ui uses the slider. So they will try to load and register the component before creating instances of it. It worked fine when there was only one level of dependencies, but then I put all of the components on the same document, to let the user choose an instrument from the collection of Web Audio instruments, and I got an error from the browser complaining about... something:


NotSupportedError: Operation is not supported

I traced it down to the register() call, and I figured that I was registering an element twice. So I made safeRegisterElement, a one-function module I'm using now instead of directly calling document.registerElement:


var safeRegisterElement = require('safe-register-element');

// safeRegisterElement(type, prototype);
// e.g.:
safeRegisterElement('custom-name', customElementPrototype);

All my custom element modules have a register method that uses safeRegisterElement internally (this lets you register the element with whatever name you want to use).

In npm: https://www.npmjs.com/package/safe-register-element And sources: https://github.com/sole/safe-register-element