Web component StencilJS检查指定插槽是否为空
我有一个带有两个命名插槽的stencilJS组件。是否有办法确定插槽是否已分配值?例如,下面的代码片段显示了“logo”和“menu”的命名插槽。如果两个命名插槽都不为空,如何检查组件内部?理想情况下,我希望在componentWillMount()期间从组件内部进行检查。多谢各位Web component StencilJS检查指定插槽是否为空,web-component,shadow-dom,stenciljs,Web Component,Shadow Dom,Stenciljs,我有一个带有两个命名插槽的stencilJS组件。是否有办法确定插槽是否已分配值?例如,下面的代码片段显示了“logo”和“menu”的命名插槽。如果两个命名插槽都不为空,如何检查组件内部?理想情况下,我希望在componentWillMount()期间从组件内部进行检查。多谢各位 <koi-menu breakpoint="768" userToggled="false"> <div class="logo__header " slot="logo">&
<koi-menu breakpoint="768" userToggled="false">
<div class="logo__header " slot="logo"><img src="assets/images/logo.png" /></div>
<ul class="nav__wrapper list mw8-ns center-m" slot="menu">
<li class="nav__listitem"><a class="ttu nav__link" href="???">Why Live Grit</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Clients</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Our Programs</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Our Story</a></li>
</ul>
</koi-menu>
可以从componentWillLoad()函数中的主机元素检测插槽的使用情况:
hasLogoSlot: boolean;
hasMenuSlot: boolean;
@Element() hostElement: HTMLStencilElement;
componentWillLoad() {
this.hasLogoSlot = !!this.hostElement.querySelector('[slot="logo"]');
this.hasMenuSlot = !!this.hostElement.querySelector('[slot="menu"]');
}
这可能不适用于您的问题,但如果您只想设置有槽元素的样式,请说仅在非空槽上添加边距,您可以使用:
::开槽([slot=“logo”]){
/*将样式应用于非空徽标*/
}
::开槽([slot=“menu”]){
/*将样式应用于非空菜单*/
}
谢谢@G.Tranter,我要试试这个。