How to add display:none to parent element of a slot with no content

I’m using web component(s) and I have created a Panel class. By default if no content has been provided for a named slot then the parent should not be visible

<div class="panel-header">
    <slot name="header">
        Header
    </slot>
</div>
<div class="panel-body">
    <slot name="body">
        Body
    </slot>
</div>
<div class="panel-footer"> <!-- display:none -->
    <slot name="footer"></slot> <!-- if there's no content -->
</div>

Here’s my parent component’s render method:

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

I’d prefer to apply this style via CSS but I’m open to suggestions with JavaScript

::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;
}