如何将Web Component插槽传递给父组件？（Lit框架）

问题原因 #

你遇到的问题核心是slot属性的作用域限制：slot属性仅对元素的直接父组件的Shadow DOM插槽生效。你在my-button-icon内部的<span slot="button-icon-end">，这个slot是针对my-button-icon自身的Shadow DOM的，而my-button-icon并没有定义对应的命名插槽，所以这个slot完全无效。外层的my-button会把整个my-button-icon组件当成默认插槽的内容，自然就显示在按钮开头了。

解决方案 #

不需要所谓的“插槽冒泡”，只需要调整my-button-icon的设计，让组件本身作为my-button插槽的内容即可：

步骤1：修改my-button-icon组件 #

让组件接收自定义属性（比如图标内容、样式等），内部不再设置slot属性：

@customElement('my-button-icon')
export class MyButtonIcon extends LitElement {
    // 可自定义图标内容
    @property() icon = '*';
    // 可添加其他自定义属性，比如size、color等

    override render() {
        return html`<span>${this.icon}</span>`;
    }
}

步骤2：在my-button中使用组件时指定slot #

直接给my-button-icon组件本身添加slot属性，指向my-button的目标插槽：

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

这样my-button的Shadow DOM会正确识别my-button-icon的slot属性，将它放到button-icon-end插槽的位置，和你之前直接用<span slot="button-icon-end">的效果完全一致，同时还能通过my-button-icon的属性自定义图标。

进阶：动态指定插槽位置 #

如果需要让my-button-icon动态绑定到不同插槽，只需在使用时修改组件的slot属性即可：

<!-- 绑定到开头插槽 -->
<my-button type="submit">
  <my-button-icon slot="button-icon-start"></my-button-icon>
  Yo im a button
</my-button>

<!-- 绑定到结尾插槽 -->
<my-button type="submit">
  <my-button-icon slot="button-icon-end"></my-button-icon>
  Yo im a button
</my-button>

内容的提问来源于stack exchange，提问作者Smuj Em