在 Web Components 中，当命名 slot（如 slot="footer"）未被外部传入内容时，其父容器（如 .panel-footer）应自动隐藏；由于 CSS 无法直接检测 slot 是否有分配节点，需借助 JavaScript 在渲染后检查 assignedNodes() 并动态控制 display 样式。
在 web components 中，当命名 slot（如 `slot="footer"`）未被外部传入内容时，其父容器（如 `.panel-footer`）应自动隐藏；由于 css 无法直接检测 slot 是否有分配节点，需借助 javascript 在渲染后检查 `assignednodes()` 并动态控制 `display` 样式。
实现该行为的关键在于：slot 元素自身永远不为空（它始终存在 DOM 中），但其“已分配节点”（assigned nodes）数量可为 0。因此，不能依赖 innerHTML === '' 或 :empty 伪类（这些对 <slot></slot> 无效），而必须调用 slot.assignedNodes({ flatten: true }) 来获取实际投射进来的内容节点。
以下是一个健壮、可复用的实现方案（适用于 Shadow DOM 中的自定义元素）：
// 假设此逻辑位于自定义元素的 updated() 或 render() 后置钩子中
render() {
this.shadowRoot.innerHTML = `
<div class="panel-header">
<slot name="header">Header</slot>
</div>
<div class="panel-body">
<slot name="body">Body</slot>
</div>
<div class="panel-footer" id="footer-container">
<slot name="footer" id="footer-slot"></slot>
</div>
`;
this.updateSlotVisibility();
}
updateSlotVisibility() {
const footerSlot = this.shadowRoot.querySelector('#footer-slot');
const footerContainer = this.shadowRoot.querySelector('#footer-container');
// 检查 slot 是否分配了有效节点（排除纯文本空格/换行）
const assigned = footerSlot.assignedNodes({ flatten: true });
const hasContent = assigned.some(node =>
node.nodeType === Node.ELEMENT_NODE ||
(node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '')
);
footerContainer.style.display = hasContent ? 'block' : 'none';
}⚠️ 重要注意事项：
- ✅ 必须在
slot已完成节点分配后执行（即render()完成且外部内容已投射），推荐在connectedCallback+requestAnimationFrame或 Lit 的updated()、Stellar 的onUpdate等生命周期钩子中调用； - ❌ 避免使用
slot.innerHTML或slot.textContent—— 它们始终返回空字符串，因<slot></slot>不渲染自身内容； - ?
assignedNodes({ flatten: true })是关键：flatten: true可递归展开嵌套 slot，确保捕获深层内容； - ? 若需支持多个条件 slot（如 header/body/footer），可将逻辑封装为通用方法，例如：
toggleSlotParent(slotName, parentSelector) { const slot = this.shadowRoot.querySelector(`slot[name="${slotName}"]`); const parent = this.shadowRoot.querySelector(parentSelector); const hasContent = slot?.assignedNodes({ flatten: true }).some(isNonEmptyNode); parent.style.display = hasContent ? 'block' : 'none'; }
总结：虽然开发者常期望纯 CSS 解决方案（如 :has(:defined) 或 :state(has-content)），但截至 2024 年，尚无跨浏览器支持的 CSS 方式能可靠判断命名 slot 是否含有投射内容。JavaScript 结合 assignedNodes() 是当前最兼容、语义清晰且性能可控的标准实践。
立即学习“Java免费学习笔记（深入）”；
