在Lit Web组件的scopedElements中使用mixin？

Question

我一直在与Lit合作，我遇到了需要帮助的情况。

我想为我的一个 Web 组件使用 mixin。

父组件：

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

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

默认混音：

    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') {};

从上面的代码中，我希望在触发 ChildComponent 时看到 console.log 为“MixinWrapper”，但它始终是“默认”。我不确定是否可以在作用域元素中提供 mixin，如下所示：

MixinWrapper(ChildComponent)

？

Answer 1

将 mixin 应用到你的scopedElements

static scopedElements() {
    return {
        'child-component': MixinWrapper(ChildComponent)
    }
}

这会将 mixin 应用于 ChildComponent，并且它将在控制台中显示“MixinWrapper”而不是“default”。