Use mixin in the scopedElements of Lit web component?

Question

I have been working with Lit and I've got into a situation where I need some help.

I want to use a mixin for one of my web component.

Parent Component:

class ParentComponent extends MixinWrapper(LitElement) {
static scopedElements() {
    return {
        'child-component': ChildComponent
    }
}

render() {
    return html`<child-component></child-component>`;
}
}
    

Default Mixin:

    export const DefaultMixin = (superClass, name = 'default') => class extends superClass {
        constructor() {
            super();
            this.name = name;
            console.log(this.name);
        }
    };
    export const MixinWrapper = (superClass) => class extends DefaultMixin(superClass, 'MixinWrapper') {};

From the above code, I want to see the console.log as "MixinWrapper" when the ChildComponent is triggered but it is always "default". I am not sure if I can supply the mixin in the scoped elements something like this: MixinWrapper(ChildComponent)?

Answer 1

Assigning the mixin to a property in the constructor and using it in the scopedElements:

class ParentComponent extends MixinWrapper(LitElement) {
    constructor() {
        super();
        this.mixin = DefaultMixin;
    }
    static scopedElements() {
        return {
            'child-component': this.mixin(ChildComponent)
        }
    }
}

allows to dynamically change the mixin at runtime by setting the value of the this.mixin property.