使用Stencil.js时如何正确地在子元素中嵌套槽?

Question

我知道，如果我有一个<slot />在我的组件，我可以从HTML中插入内容，但我不明白这是如何工作的。

例如:

render() {
return(
<div>
<slot />
</div>
)
}

现在，在我的HTML中，我可以这样做:

<my-card>test</my-card>

和"test"将作为内容插入。

但是，如果<slot />嵌套在组件内的其他子元素中，则"test"即使不在这些特定元素中，文本仍然会被插入。这是怎么做到的呢?

例如:

render() {
return(
<div>
<button><slot /></button>
<select>
<option value="one"><slot /></option>
</select>
<p><slot /></p>
</div>
)
}

现在，在我的HTML中，如果我这样做:

<my-card>test</my-card>

文本"test"是插在<slot />里面的按钮。但是如果我想在<option> <slot />中添加文本呢?我怎么做呢?

如果我只有一个<slot />在<option>例如，我如何从我的HTML里面插入文本?

Answer 1

正如评论中提到的，您只能有一个未命名的插槽。任何额外的插槽必须有一个名称:

<slot name="outside" />

可以使用slot属性在命名槽中添加元素:

<my-card>
<span slot="outside">test</span>
</my-card>

请参阅Stencil关于插槽的文档。