javascript - Proxy a WebComponent's constructor that extends HTMLElement - Stack Overflow

admin管理员组

文章数量:1344612

So, in a library that I'm creating that uses custom elements, you obviously need to define the class in the CustomElementsRegistry before you may instantiate it.

As of right now, this is being solved with a decorator:

class Component extends HTMLElement {

    static register (ponentName) {
        return ponent => {
            window.customElements.define(ponentName, ponent);
            return ponent;
        }
    }
}

@Component.register('my-element')
class MyElement extends Component { }

document.body.appendChild(new MyElement());

This works, however, I would like to automatically register the custom element upon instantiation of the class (so that the author does not have to add the decorator to every single ponent that they write). This could maybe be acplished via a Proxy.

---

My problem, though, is that when I attempt to use a Proxy on the constructor, and attempt to return an instance of the target, I still get Illegal Constructor, as if the element has never been defined in the registry.

This obviously has to do with the way I am instantiating the class inside of the proxy, but I'm unsure of how to do it otherwise. My code is as follows:

Please run in latest Chrome:

class Component extends HTMLElement {

    static get ponentName () {
        return this.name.replace(/[A-Z]/g, char => `-${ char.toLowerCase() }`).substring(1);
    }
}

const ProxiedComponent = new Proxy(Component, {

    construct (target, args, extender) {
        const { ponentName } = extender;
  	
        if (!window.customElements.get(ponentName)) {
            window.customElements.define(ponentName, extender);
        }
    
        return new target(); // culprit
    }
});

class MyElement extends ProxiedComponent { }

document.body.appendChild(new MyElement());

So, in a library that I'm creating that uses custom elements, you obviously need to define the class in the CustomElementsRegistry before you may instantiate it.

As of right now, this is being solved with a decorator:

class Component extends HTMLElement {

    static register (ponentName) {
        return ponent => {
            window.customElements.define(ponentName, ponent);
            return ponent;
        }
    }
}

@Component.register('my-element')
class MyElement extends Component { }

document.body.appendChild(new MyElement());

This works, however, I would like to automatically register the custom element upon instantiation of the class (so that the author does not have to add the decorator to every single ponent that they write). This could maybe be acplished via a Proxy.

---

My problem, though, is that when I attempt to use a Proxy on the constructor, and attempt to return an instance of the target, I still get Illegal Constructor, as if the element has never been defined in the registry.

This obviously has to do with the way I am instantiating the class inside of the proxy, but I'm unsure of how to do it otherwise. My code is as follows:

Please run in latest Chrome:

class Component extends HTMLElement {

    static get ponentName () {
        return this.name.replace(/[A-Z]/g, char => `-${ char.toLowerCase() }`).substring(1);
    }
}

const ProxiedComponent = new Proxy(Component, {

    construct (target, args, extender) {
        const { ponentName } = extender;
  	
        if (!window.customElements.get(ponentName)) {
            window.customElements.define(ponentName, extender);
        }
    
        return new target(); // culprit
    }
});

class MyElement extends ProxiedComponent { }

document.body.appendChild(new MyElement());

How can I continue the chain of inheritance inside of the proxy without losing the context of the fact that I'm instantiating the MyElement class so that it doesn't throw the Illegal Constructor exception?

• javascript
• custom-element
• proxy-pattern

Share Improve this question Follow edited Dec 18, 2017 at 16:29 ndugger asked Dec 12, 2017 at 19:00 nduggerndugger 7,56155 gold badges3434 silver badges4242 bronze badges 5

• I believe this is the expected behavior. You should be able to do document.createElement(LibElement.ponentName). The classes created by extending the native HTMLElement aren't actually valid for constructing elements, and should be constructed using document.createElement instead. – shamsup Commented Dec 12, 2017 at 21:05
• as a solution, you could do return document.createElement(target.ponentName) in the proxy construct. – shamsup Commented Dec 12, 2017 at 21:08
• @shamsup Are you saying that they aren't valid for constructing elements according to the specification, or that it simply doesn't work--because it does work (in chrome). – ndugger Commented Dec 12, 2017 at 21:13
• I mean even just class Custom extends HTMLElement {}; new Custom(); will throw the illegal constructor error because HTMLElement cannot be created with the new keyword and must be created through document.createElement – shamsup Commented Dec 12, 2017 at 21:17
• That only applies if the class has not been added to the CustomElementsRegistry – ndugger Commented Dec 12, 2017 at 21:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

There were 2 problems:

• new target() created LibElement instance, that is not registered as custom element. And here you got Illegal Constructor error.
• even if you register LibElement resulting DOM element will be <lib-element>, cause you call new target and at this point javascript have no idea about child class.

The only way i found is to use Reflect API to create right instance of object.

class LibElement extends HTMLElement {
    static get ponentName () {
        return this.name.replace(/[A-Z]/g, char => `-${ char.toLowerCase() }`).substring(1);
    }
}

const LibElementProxy = new Proxy(LibElement, {
    construct (base, args, extended) {
        if (!customElements.get(extended.ponentName)) {
            customElements.define(extended.ponentName, extended);
        }
    
        return Reflect.construct(base, args, extended);
    }
});

class MyCustomComponent extends LibElementProxy {}
class MyCustomComponentExtended extends MyCustomComponent {}

document.body.appendChild(new MyCustomComponent());
document.body.appendChild(new MyCustomComponentExtended());

And I really liked this idea of proxied constructor for auto-registration of custom elements )

You are extremely close to a solution here, and the only problem is that the native HTMLElement cannot be instantiated with the new keyword, and must be created through document.createElement. You can reuse everything you have and only replace the return value of the construct method in the proxy:

class Component extends HTMLElement {

  static get ponentName() {
    return this.name.replace(/[A-Z]/g, char => `-${ char.toLowerCase() }`).substring(1);
  }
}

const ProxiedComponent = new Proxy(Component, {

  construct(target, arguments, extender) {
    const {
      ponentName
    } = target;

    if (!window.customElements.get(ponentName)) {
      window.customElements.define(ponentName, extender);
    }

    return document.createElement(target.ponentName); // Properly constructs the new element
  }
});

class MyElement extends ProxiedComponent {}

document.body.appendChild(new MyElement());

I was trying to do the same recently and was pletely overthinking it. In my case, I wanted to implement dependency injection.

Here's a solution with a TypeScript class decorator, no proxy:

const customElement = ((tagName: string, elementOptions?: ElementDefinitionOptions) =>
    (<TARGET extends Constructor<HTMLElement>>(target: TARGET): any => {
      class CustomElementClass extends target {

        public constructor(..._args: any[]) {
          super(...yourArgumentReplacementFunc());
        }

      }

      customElements.define(tagName, CustomElementClass, elementOptions);

      return CustomElementClass;
    }));

The decorator replaces the class, with it as super, and calls it's constructor with replaced arguments (injected in my case). A custom element must have no constructor parameters.

本文标签： javascriptProxy a WebComponent39s constructor that extends HTMLElementStack Overflow