如果我在Stencil组件中嵌套了多个<slot />，我需要给它们命名，然后在使用该组件时在HTML页面中引用它们。那么，我怎么做呢?
的例子:
render() {
return(
<div>
<button><slot name="one" /></button>
<select>
<option value="one"><slot name="two" /></option>
</select>
<p> <slot name="three" /></p>
</div>
)
}
然后当我添加这个组件时，我如何向每个<slot />添加内容?
我已经尝试了这里解释的:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot但是没有用!我在我的HTML页面中尝试了以下操作:
<span slot="two">dfdf</span>
<slot name="two"><span>gdgdg</span></slot>
既不工作!
MDN文档中的示例非常清楚。
我只从示例中删除内容只关注插槽<元素:
customElements.define("slot-example", class extends HTMLElement{
constructor(){
super()
.attachShadow({mode:"open"})
.append(document.getElementById(this.nodeName).content.cloneNode(true));
}
});<template id="SLOT-EXAMPLE">
<style>span { color:red }</style>
<slot name="element-name">NEED NAME</slot>
<span><slot name="description">NEED DESCRIPTION</slot></span>
<slot name="attributes"><p>None</p></slot>
</template>
<slot-example>
<span slot="element-name">slot-example</span>
<span slot="description">This demonstrates slot</span>
</slot-example>
<slot-example>
<b slot="element-name">another slot-example</b>
<b slot="attributes">Explain to yourself why this is bold and not a paragraph</slot>
</slot-example>有关使用::slotted样式槽的深入、深入、非常深入的了解，请参见:::slotted CSS选择器用于shadowDOM slot
中的嵌套子节点注释后添加
这里有一些启发让你开始:
customElements.define("my-select", class extends HTMLElement{
connectedCallback(){
setTimeout(()=>{ // ! wait till innerHTML is parsed
this.innerHTML =
"<SELECT>" +
this.innerHTML
.split("n")
.filter(Boolean)
.map(company=>`<OPTION>${company.trim()}</OPTION>`);
"</SELECT>";
});
}
});<my-select>
Apple
Microsoft
Google
Mozilla
</my-select>