如何在StencilJS中检测匿名默认插槽是否为空？

下面两种方案都不需要修改用户侧的组件用法，可直接兼容你预期的匿名插槽调用方式。

方案1：slotchange事件监听（推荐，支持动态插槽内容） #

通过插槽原生的slotchange事件监听内容变化，自动更新非空状态，不管是初始加载还是后续动态修改插槽内容都能正确识别。

import { State, Element } from '@stencil/core';

export class StencilButton {
  @Element() hostElement: HTMLElement;
  // 用State装饰器标记，状态变化自动触发重渲染
  @State() hasText: boolean = false;

  private onSlotChange() {
    const childNodes = this.hostElement.childNodes;
    let hasValidContent = false;

    for (const node of childNodes) {
      // 元素节点直接判定为有效内容
      if (node.nodeType === Node.ELEMENT_NODE) {
        hasValidContent = true;
        break;
      }
      // 文本节点需要过滤全空白的情况
      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
        hasValidContent = true;
        break;
      }
    }

    this.hasText = hasValidContent;
  }

  render() {
    return (
      <Host>
        { this.icon && <mds-icon name={this.icon} /> }
        { this.hasText && <mds-text typography={/* 你的配置 */}><slot onSlotchange={this.onSlotChange.bind(this)} /></mds-text> }
      </Host>
    )
  }
}

方案2：生命周期静态检测（适合无动态插槽的场景） #

如果你的组件不需要支持运行时动态修改插槽内容，直接在componentWillLoad中遍历childNodes判断即可，比innerHTML判断更准确，不会受Stencil渲染时序影响：

componentWillLoad(): void {
  const childNodes = this.hostElement.childNodes;
  let hasValidContent = false;

  for (const node of childNodes) {
    if (node.nodeType === Node.ELEMENT_NODE) {
      hasValidContent = true;
      break;
    }
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
      hasValidContent = true;
      break;
    }
  }

  this.hasText = hasValidContent;
}

注意事项 #

不要使用innerHTML判断非空：Stencil的编译渲染时序会导致componentWillLoad阶段innerHTML未赋值，且全空白文本、注释节点也会干扰判断，直接操作原生childNodes是最可靠的方案。

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