vuetify
vuetify copied to clipboard
[Feature Request] If a slot is empty on a component then the slot wrapper should be set to `display: none`
Problem to solve
Sometimes I want to conditionally render a slot, but if I end up using the slot, then the wrapper elements used to make the slot (e.g. VAppBar and it's Prepend and Append Slots) end up getting loaded in and applying styles which can add padding or other stuff that I don't want.
Proposed solution
For empty slots, we vuetify can check to see if there are any child nodes within it and not render any wrapper nodes, or we can use CSS (which is what I ended up doing)
.v-toolbar {
:deep(.v-toolbar__append):empty {
display: none;
}
:deep(.v-toolbar__prepend):empty {
display: none;
}
}
https://github.com/vuejs/core/pull/6484