Reputation: 10096
Is it possible to modify customElements.define
and use a custom function instead?
This is what I have tried so far, but obviously this does not work because window.customElements
is read only.
const future = ["hello-world"];
let customElementsRegistry = window.customElements;
const registry = {};
registry.define = function(name, constructor, options) {
if (future.includes(name)) {
customElementsRegistry.define(name, constructor, options);
}
}
window.customElements = registry;
window.customElements.define("hello-world", HelloWorld);
Is this possible or is my only option to create my own registry
and just use that one?
Upvotes: 1
Views: 699
Reputation: 45121
The property is still configurable so you can redefine it. Though this doesn't look like a great idea for production app.
const future = ["hello-world"];
let customElementsRegistry = window.customElements;
const registry = {};
registry.define = function(name, constructor, options) {
console.log('hijacked')
if (future.includes(name)) {
customElementsRegistry.define(name, constructor, options);
}
}
Object.defineProperty(window, "customElements", {
get() {
return registry
}
})
window.customElements.define("hello-world", class HelloWorld extends HTMLElement {
constructor() {
super()
this.innerHTML = "Hello World"
}
});
<hello-world>Test</hello-world>
Upvotes: 2