如何在HTML页面中引用并填充Stenciljs组件的命名<slot />？

核心问题说明 #

你尝试的两种写法里，只有第一种方向正确，但需要注意带slot属性的元素必须直接作为自定义组件的子元素；第二种写法是错误的，slot标签仅用于组件内部定义占位，使用组件时不需要重复写。

正确使用示例 #

假设你的组件标签名为<my-custom-component>，在HTML页面中填充内容的正确写法如下：

<my-custom-component>
  <!-- 填充name="one"的slot -->
  <span slot="one">按钮文本</span>
  <!-- 填充name="two"的slot -->
  <span slot="two">选项内容</span>
  <!-- 填充name="three"的slot -->
  <span slot="three">段落文本</span>
</my-custom-component>

关键注意点 #

• 所有带slot属性的元素必须是自定义组件的直接子节点，不能嵌套在其他元素内部。
• 组件内部的<slot name="xxx">是占位符，使用组件时不需要再写<slot>标签，只需要通过子元素的slot属性对应名称即可完成内容分发。
• 确保你的Stencil组件已经正确编译、注册，在HTML页面中可以正常识别组件标签。

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