Как добавить display:none к родительскому элементу слота без содержимого

Я использую веб-компоненты и создал класс Panel.
По умолчанию, если для именованного слота не было предоставлено содержимого, родительский элемент не должен быть виден.

<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>

Вот метод рендеринга моего родительского компонента:

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

Я бы предпочел применить этот стиль с помощью CSS, но я открыт для предложений по 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;
}

Похоже, что существует решение CSS, но на основе приведенных ниже предложений мне удалось получить желаемый результат.

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