如何在Stencil.js中正确在子元素内嵌套插槽？

用命名插槽解决嵌套场景问题 #

Stencil.js 提供命名插槽机制，给<slot>加name属性就能精准指定内容插入位置，完美解决你遇到的嵌套元素里插槽混乱的问题。

1. 组件内部定义命名插槽 #

比如你要做包含按钮、下拉选项的组件，给不同位置的插槽分配唯一名称：

// my-custom-component.tsx
import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-custom-component',
  shadow: true
})
export class MyCustomComponent {
  render() {
    return (
      <div class="container">
        <button class="action-btn">
          {/* 按钮内的命名插槽 */}
          <slot name="button-text"></slot>
        </button>
        <select class="select-box">
          <option>
            {/* 选项内的命名插槽 */}
            <slot name="option-label"></slot>
          </option>
        </select>
      </div>
    );
  }
}

2. 外部使用时绑定对应插槽 #

在使用组件时，给要插入的内容元素加slot属性，值和组件内插槽的name完全匹配即可：

<my-custom-component>
  <!-- 内容会插入到button内的插槽 -->
  <span slot="button-text">提交表单</span>
  <!-- 内容会插入到option内的插槽 -->
  <span slot="option-label">请选择分类</span>
</my-custom-component>

3. 关键细节提醒 #

• 没有加slot属性的内容，会默认插入到组件内无name的默认插槽；如果组件里没有默认插槽，这部分内容会被直接忽略。
• 插槽名称是大小写敏感的，要保证外部slot属性值和内部<slot name="xxx">的名称完全一致。
• 不管插槽嵌套在button、option还是其他元素里，命名插槽都能精准定位，不会出现内容只插第一个插槽的问题。

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