A named slot cannot be used as content for the default slot of a child component

[thomas-darling]

I'm submitting a bug report

• Library Version: 1.10.0

Current behavior:

app.html Let's say we have an app, which uses the component foo, providing content for its named slots.

<template>

  <require from="./foo.html"></require>

  App

  <foo>
    <div slot="foo-1"> 1 </div>
    <div slot="foo-2"> 2 </div>
  </foo>

</template>

foo.html The component foo uses the component bar. The content of the first slot in foo should be projected into the default slot in bar. The content of the second slot in foo should be projected into the named slot in bar.

<template>

  <require from="./bar.html"></require>

  Foo

  <bar>
    <slot name="foo-1"></slot>
    <slot name="foo-2" slot="bar"></slot>
  </bar>

<template>

bar.html The component bar has a default slot and a named slot, and presents the content of those.

<template>

  Bar

  <slot></slot>
  <slot name="bar"></slot>

<template>

The result of the above looks like this - note how the content of the first slot is lost:

App Foo Bar
2

Expected/desired behavior:

• What is the expected behavior?

The result of the above should like this:

App Foo Bar
1
2

For reference, here's the above, implemented using native Shadow DOM: https://codepen.io/anon/pen/RzvZWB

• What is the motivation / use case for changing the behavior?

It should be possible to project the contents of a named slot in a component, into the default slot of a child component.

[EisenbergEffect]

@thomas-darling I’m not sure how fast we’ll be able to get around to fixing this particular scenario in vCurrent. If this is critical to you, one thing you could do is use the shadydom polyfill, turning it on to emulate always, and then set your custom elements to use shadow dom.