将 Web 组件槽传递给父级

Question

我正在尝试重新使用 lit 的 Web 组件，但我在插槽方面遇到了麻烦。我制作了一个示例按钮，可以在其中将图标添加到标签的开头或结尾，并使用插槽名称，如下所示：

<my-button type="submit">
  <span slot="button-icon-end">*</span>
  Yo im a button
</my-button>

它会正确渲染出像

Yo im a button *

这样的按钮。但是，我有时想添加更多属性并自定义该图标。我尝试制作第二个组件来简单地输出与插槽完全相同的跨度，但它总是将

*

放在开头。

@customElement('my-button-icon')
export class MyButtonIcon extends LitElement {
    override render() {
        return html`<span slot="button-icon-end">*</span>`
    }
}

有没有办法将插槽冒泡到具有点亮甚至本机 Web 组件的父组件？

Answer 1

我发现之前的答案建议直接将属性添加到 Web 组件类。这非常有效：

    override render() {
        this.slot = `button-icon-${this.position}`;
        return html`<span>*</span>`
    }