StencilJS 检查命名槽是否为空答案

【问题标题】：StencilJS check if named slot is emptyStencilJS 检查命名槽是否为空
【发布时间】：2019-09-29 06:05:42
【问题描述】：

我有一个带有两个命名槽的 stencilJS 组件。有没有办法确定插槽是否已分配值？例如，下面的代码 sn-p 显示了“logo”和“menu”的命名槽。如果两个命名插槽都不为空，如何检查组件内部？理想情况下，我想从组件内部和在 componentWillMount() 期间进行检查。谢谢你。

  <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>

【问题讨论】：

标签： web-component shadow-dom stenciljs

【解决方案1】：

可以在componentWillLoad()函数中从宿主元素中检测到slot的使用：

hasLogoSlot: boolean;
hasMenuSlot: boolean;

@Element() hostElement: HTMLStencilElement;

componentWillLoad() {
    this.hasLogoSlot = !!this.hostElement.querySelector('[slot="logo"]');
    this.hasMenuSlot = !!this.hostElement.querySelector('[slot="menu"]');
}

【讨论】：

谢谢@G。 Tranter，我要试试这个。

【解决方案2】：

这可能不适用于您的问题，但如果您只想设置开槽元素的样式（比如只在非空槽上添加边距），您可以使用::slotted pseudo-element：

::slotted([slot="logo"]) {
  /* Apply styles to non-empty logo */
}

::slotted([slot="menu"]) {
  /* Apply styles to non-empty menu */
}

【讨论】：