Named nested slot not working

[paulpflug]

# main
comp1
  div(slot="someName")

# comp1
.comp1
  comp2
    slot(name="someName")
  .wrongPlace
    slot

#comp2
.comp2
  .rightPlace
    slot(name="someName")
  .wrongPlace
    slot

output:

.comp1
  .comp2
    .rightPlace
    .wrongPlace
      div(slot="someName")
  .wrongPlace
    div(slot="someName")

https://jsfiddle.net/paulpflug/p2oe550c/

[simplesmiler]

Another take: https://jsfiddle.net/simplesmiler/p2oe550c/5/
If a named slot is wrapped into another component, then the content for this slot also gets inserted into unnamed slot.

It feels like the named slots still don't work when nested. It's a blocker when developing whole application in .vue files, where main html file only defines overall components composition hierarchy in the application, like so:

<app>
  <outer-component>
    <inner-component></inner-component>
  </outer-component>
</app>

Here's a fiddle reproducing issue https://jsfiddle.net/plunntic/v2pfj4c4.

[fullfs]

Probably related with #2511

@fullfs I'm not really sure if that's directly related. What's not working in #2511 is dynamic slot name resolution, like in v-for (however it works when setting the name explicit, according to what @littlstonee wrote).

In my example, it's not working even though the slot name is a absolutely static and explicit string literal. In my opinion, the thing is that there are two components created/indicated by they're custom tags in the main markup (<outer> and <inner>), one embeded in the other one, and also both of them having they're templates defined as a string in they're constructor objects. (It's also worth to note that neither of them can be a vue root instance, and that's related only to using named slots, to reproduce the issue.)

I've updated the example to demonstrate my theory a little more https://jsfiddle.net/plunntic/v2pfj4c4.

Anyway you may be right that's related in some internal way, but i don't think that's the same thing.

[fullfs]

@plunntic Yeah, I see. Unnamed slot seem to accept whatever content is inserted while named slot has restrictions arounnd what elements are checked for having slot attribute. I believe top level element of a component is just not expected to have the attribute and is not checked for that. Probably same goes for v-for-ed named slots. Those elements are treated very special way, because they need a merge, after all.

[yyx990803]

@plunntic the slot="two" attribute needs to be present on the "inserted content" in the common parent context: https://jsfiddle.net/v2pfj4c4/11/

Your app3 example is actually not working - it's simply rendering an empty slot followed by the inner3 component.

@yyx990803 Thanks, it makes sense. So it's basically not possible to attach one component instance to more than one slot?

This could be useful if there would be a way to define that inner component, in it's template, contains a header which should be inserted in it's outer component header slot, and also contains a body which should be inserted in it's outer component body slot.

But i'm guessing there is a reason for it to not work that way.

[xgqfrms]

vue nested slot bug

nested slot style errror

        <GlobalSystemGuide2>
            <div slot="global-system-guide-slot2">
                <SystemGuide
                    placement="left"
                    title="title"
                    :buttons="[]"
                    :isGuideFinished="false">
                    <RightSuspension
                        slot="system-guide-slot"
                        :isFraud="suspensionObj.isFraud"
                        :isShowFraud="true"
                        @change="handleChangeRightSuspension">
                    </RightSuspension>
                </SystemGuide>
            </div>
        </GlobalSystemGuide2>

one level OK

                <SystemGuide
                    placement="left"
                    title="title"
                    :buttons="[]"
                    :isGuideFinished="false">
                    <RightSuspension
                        slot="system-guide-slot"
                        :isFraud="suspensionObj.isFraud"
                        :isShowFraud="true"
                        @change="handleChangeRightSuspension">
                    </RightSuspension>
                </SystemGuide>