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