Version

2.4.2

Reproduction link

https://output.jsbin.com/hokacib

Steps to reproduce

Use a custom element that uses the slot element inside a Vue component. Elements meant to fill slots for the custom element are not rendered in HTML with the slot attribute.

What is expected?

Slots for custom elements should behave as expected by the custom element in question. In the example I referenced, the left navigation drawer should remain identical in behavior when using either HTML or VueJS (the drawer on the left should open on wide browsers and hide on small browsers, which can be demonstrated by resizing the browser window horizontally on a computer). The custom element that uses slots is app-drawer-layout.

What is actually happening?

The [slot] attribute is being picked up by VueJS, but is not being rendered in HTML. This causes the custom element to not behave as expected. In the example referenced, the drawer does not open on wide browser windows when using VueJS. By manually editing the rendered HTML from VueJS and adding the slot="drawer" attribute to the app-drawer element, the custom element (app-drawer-layout) behaves as expected.

Since web components is still being drafted, I didn't know whether to submit this as a bug or a feature request. I haven't looked deep into the source code of Vue yet, but ideas I've had to solve this issue include:

1. Ensuring that a Vue component absorbs the slot attribute, and rendering it to HTML if it is not absorbed
2. Add a directive before the slot attribute to signal to Vue to ignore that slot and render it to HTML instead of absorbing it (slot="drawer" to v-keep:slot="drawer", or something along those lines)

I'll look through the source code to get a better understanding of what is happening, but I wanted to submit this issue to get some sort of review for whether a fix for this issue would be a welcomed integration into Vue. I like the data binding nature of Vue, but I also have custom elements that I'd like to use at the same time. I've had no other issues with using Vue and custom elements except for this issue with slot.