feat(portal): consider rendering placeholder comment when slim=true and only one child #161
Description
In the portal component, currently the prop slim only applies when the portal is disabled.
The portal component always renders a placeholder tag, (when content is sent to the portal-target) which can disrupt some layout depending on where it is placed (and type of tag) in the users markup.
I suggest allowing "slim" to apply to the placeholder element as well. Vue will render a comment placeholder when you pass false to createElement (h(false)). I suggest adding in a check in the render function to see if children.length <=1 and if this.slim is true, to render the placeholder comment element when not disabled.
render(h) {
const children = this.$slots.default || this.$scopedSlots.default || []
const Tag = this.tag
if (children.length && this.disabled) {
// hack to make child components skip the portal when defining their $parent
this.$options.abstract = true
return children.length <= 1 && this.slim ? (
children[0]
) : (
<Tag>{this.normalizeChildren(children)}</Tag>
)
} else {
if (this.slim && children.length <= 1) {
return h(false) // renders `<!---->`
} else {
return (
<Tag
class={'v-portal'}
style={'display: none'}
key={'v-portal-placeholder'}
/>
)
}
// h(this.tag, { class: { 'v-portal': true }, style: { display: 'none' }, key: 'v-portal-placeholder' })
}
}