undefined scope for slots in nested custom elements

[geonanorch]

Help us to manage our issues by answering the following:

1. Describe your issue:

I have nested riot components. The child component uses slots. When in the parent component I provided content for those slots AND that content contains references to the parent component's scope, I get a 'scope is undefined' at run time.

<my-app>
  <my-tag>
    <span slot="custom1">CUSTOM1 (no var)</span>       <!-- OK -->
    <span slot="custom2">CUSTOM2 { myvar }</span>      <!-- ERROR -->
    <span slot="div">DIV { myvar }</span>               <!-- OK -->
  </my-tag>

  <script>
    export default {
      myvar: 'var in my-app'
    }
  </script>
</my-app>

This exception however ONLY occurs if the slot is placed within a custom element (Riot or other):

<my-tag>
  <div id="div"><slot name="div"></slot></div>             
  <custom><slot name="custom1"></slot></custom>
  <custom><slot name="custom2"></slot></custom>    
</my-tag>

I verified that the issue is not as simple as the child's scope being used instead of the parent's: exporting a my-var from my-tag still yields an undefined scope. I also had a look at existing issues, it sounds similar to #2842, but no slots there.

At any rate it looks like the nature of embedded elements (custom or not) influences the processing of slots at a higher level.

2. Can you reproduce the issue?

Here a plunk.
I was not able to reproduce the issue without a nested component: if I mount a riot component explicitly then the slot content is not recognized (would be a separate issue, but mentioning it here in case there is a connection).

3. On which browser/OS does the issue appear?

Firefox 78.0.1
Vivaldi 3.1.1929.45 (Chrome 83.0.4103.119)

4. Which version of Riot does it affect?

latest: 4.13.4

5. How would you tag this issue?

• Question
• Bug
• Discussion
• Feature request
• Tip
• Enhancement
• Performance

[GianlucaGuarini]

This issue was fixed in riot@4.13.6.
I will try to let riot expressions work in web components as well but now at least the HTML rendered is correct.

[GianlucaGuarini]

I have just noticed that the HTML output for native web components is not yet correct (the <slot> tags shouldn't be rendered). I will make a new release asap fixing both problems. Users that are not mixing web components to riot shouldn't notice any difference though

[GianlucaGuarini]

This issue was completely fixed in Riot.js@4.14.0

[geonanorch]

Thank you @GianlucaGuarini , I can confirm that my issue is fixed with riot@4.14.0.
(and sorry: I had a quick look your at your initial commit thinking that maybe I could contribute, but it does not look like a 5-minutes thing to understand how riot works! ;-) )