在Lit Web组件的scopedElements中使用Mixin的问题求助

核心问题 #

你当前的代码里，MixinWrapper仅作用于ParentComponent，ChildComponent完全没被这个Mixin包裹，所以它只会使用DefaultMixin的默认参数default输出内容。

解决方案 #

要让ChildComponent输出MixinWrapper，你需要把MixinWrapper应用到ChildComponent上，完全可以直接在scopedElements里用MixinWrapper(ChildComponent)，也可以提前定义好包裹后的组件类。

方法1：直接在scopedElements中用Mixin包裹子组件 #

修改父组件的scopedElements配置：

class ParentComponent extends MixinWrapper(LitElement) {
  static scopedElements() {
    return {
      // 直接用MixinWrapper包裹ChildComponent
      'child-component': MixinWrapper(ChildComponent)
    }
  }

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

方法2：提前定义带Mixin的子组件类 #

如果需要多次复用这个带Mixin的子组件，可提前定义：

// 先创建包裹后的子组件类
const WrappedChildComponent = MixinWrapper(ChildComponent);

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

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

原理说明 #

你的MixinWrapper是一个高阶组件函数，它接收组件类作为参数，返回一个被DefaultMixin包裹且传入name='MixinWrapper'的新类。只要把ChildComponent传入MixinWrapper，就能让子组件拥有该Mixin的逻辑，控制台就会输出MixinWrapper。

内容的提问来源于stack exchange，提问作者Hitesh Misro