如何为无内容的slot元素的父元素设置display:none

需求描述 #

我在用Web Component开发Panel组件，要求默认状态下，如果某个具名slot没有被提供内容，它的父容器就需要隐藏。组件内部的HTML结构如下：

<div class="panel-header">
    <slot name="header">
        Header
    </slot>
</div>
<div class="panel-body">
    <slot name="body">
        Body
    </slot>
</div>
<div class="panel-footer"> <!-- 当footer slot无内容时隐藏 -->
    <slot name="footer"></slot>
</div>

父组件使用示例 #

父组件的render方法代码如下：

render() {
    this.innerHTML = `
        <panel-component>
            <span slot="header">Member Info</span>
            <span slot="body">${this.search ? this.search : 'Please select a member'}</span>
            <!-- 没有提供footer slot -->
        </panel-component>
    `;
}

尝试的CSS方案（未生效） #

我更倾向用CSS实现这个效果，试了几种写法都没能达到预期：

::slotted(div:empty) {
    display: none;
}

.panel-footer:empty,
.panel-footer:has(:empty) {
    display: none;
}

:scope > :empty {
    display: none;
}

::slotted(div[slot="footer"]:empty) {
    display: none;
}

可行的JavaScript实现方案 #

看起来没有合适的纯CSS解决方案，最后通过JavaScript实现了需求：

render() {
        this.shadowRoot.appendChild(template.content.cloneNode(true));
        const parent = this.shadowRoot.querySelector(".panel-footer");
        const footer = this.shadowRoot.querySelector("#footer");
        footer.assignedNodes().length > 0 ? parent.style.display = "block" : parent.style.display = "none";
    }

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