是否可以在 lit 2.0 中制作类似 React 的复合组件?

Is it possible to make React-like compound components in lit 2.0?

我尝试使用 Lit 2.0 构建复合组件,但将数据作为属性传递给插槽似乎是不可能的。

  <my-accordion>
    <my-accordion-title>Title</my-accordion-title>
    <my-accordion-content>Content</my-accordion-content>
  </my-accordion

如何将“扩展”属性 传递给自定义元素槽?

这是我的自定义元素:

@customElement("my-accordion")
export class MyAccordion extends LitElement {

  @property()
  extended: boolean = false;

  toggleExtend(){
     this.extended = !this.extended
  }

  render() {
    return html`
      <div @click=${this.toggleExtend}>
        <slot .extended=${this.extended}></slot>
      </div>
    `;
  }
}


@customElement("my-accordion-title")
export class MyAccordionTitle extends LitElement {
  // want to access parent node extended property here
  render() {
    return html`
      <div>
        <slot></slot>
      </div>
    `;
  }
}

要将 extended 属性 分配给带槽子元素,请获取槽元素的 assignedElements() 数组。

@customElement("my-accordion")
export class MyAccordion extends LitElement {

  @property()
  extended: boolean = false;

  toggleExtend(){
     this.extended = !this.extended
  }

  updated(changed: PropertyValues<this>) {
    if (changed.has('extended'))
      this.extendedChanged()
  }

  extendedChanged() {
    for (const child of this.slot.assignedElements()) {
      if (child instanceof MyAccordionTitle)
        child.extended = this.extended;
    }
  }

  @query('slot') slot: HTMLSlotElement | null;
  
  render() {
    return html`
      <div @click=${this.toggleExtend}>
        <slot></slot>
      </div>
    `;
  }
}


@customElement("my-accordion-title")
export class MyAccordionTitle extends LitElement {
  // want to access parent node extended property here
  render() {
    return html`
      <div>
        <slot></slot>
      </div>
    `;
  }
}

注意:将点击侦听器分配给 <div> 和其他非交互元素时,涉及许多可访问性问题。因此通常建议使用 <button> 元素,或者在您的情况下可能使用 <details><summary>