基于插槽内容条件显示Web Component插槽容器的实现方案

问题背景 #

现有如下LitElement组件代码：

import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('my-element')
export class MyElement extends LitElement {
    render() {
        return html`
<div>some static content</div>
<div class="slotted"><slot></slot></div>
<div>more static content</div>
        `;
    }
}

组件使用时，插槽内容maybeContentMaybeNothing可能是HTML、文本或为空：

<my-element>${maybeContentMaybeNothing}</my-element>

需要实现：插槽为空时隐藏.slotted容器，有内容时显示，且要支持初始化检查和内容变化的实时监听。

实现方案 #

通过监听插槽的slotchange事件，结合响应式状态控制元素渲染，具体代码修改如下：

import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('my-element')
export class MyElement extends LitElement {
  // 响应式状态，标记插槽是否有有效内容
  @state() private hasSlottedContent = false;

  firstUpdated() {
    // 组件首次更新后，初始化检查插槽内容
    this.checkSlottedContent();
    // 获取插槽元素，监听内容变化事件
    const slot = this.shadowRoot?.querySelector('slot');
    slot?.addEventListener('slotchange', () => {
      this.checkSlottedContent();
    });
  }

  // 检查插槽是否包含有效内容的核心逻辑
  private checkSlottedContent() {
    const slot = this.shadowRoot?.querySelector('slot');
    if (!slot) return;

    // 获取所有分发到插槽的节点（flatten: true 会包含嵌套插槽的内容）
    const assignedNodes = slot.assignedNodes({ flatten: true });
    
    // 过滤掉纯空白文本节点，判断是否存在有效内容
    this.hasSlottedContent = assignedNodes.some(node => {
      // 元素节点直接视为有效内容
      if (node.nodeType === Node.ELEMENT_NODE) return true;
      // 文本节点需排除纯空白的情况
      if (node.nodeType === Node.TEXT_NODE) {
        return node.textContent?.trim().length > 0;
      }
      return false;
    });
  }

  render() {
    return html`
<div>some static content</div>
<!-- 根据状态决定是否渲染插槽容器 -->
${this.hasSlottedContent ? html`<div class="slotted"><slot></slot></div>` : ''}
<div>more static content</div>
        `;
  }
}

关键细节说明 #

• 响应式状态：使用@state()装饰器定义hasSlottedContent，状态变化时会自动触发组件重新渲染，更新.slotted容器的显示状态。
• 初始化检查：在firstUpdated钩子中执行首次内容检查，确保组件加载时就正确显示/隐藏容器。
• 内容变化监听：通过slotchange事件监听插槽内容的动态变化（比如外部动态添加/删除插槽内容时），实时更新状态。
• 有效内容判断：通过assignedNodes获取插槽分发的所有节点，过滤掉纯空白的文本节点，避免仅输入空格、换行时误判为有内容。

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