riot/riot

named slot in embedded component ends up in default slot

Closed this issue · 6 comments

geonanorch commented

1. Describe your issue:
when using another web component (namely elix, so I will mention 'elix' to speak of those components), named slots within that elix component are not handled correctly. It looks like those slots have their name stripped: they end up next to the default slot content for the elix component.

2. Can you reproduce the issue?
Yes: https://plnkr.co/edit/7m76cYjdj4Xl9fqQ
The demo uses 2 elix components:

  • one button with a default slot (no problem)
  • one expandable with a header and a default/body slot (header ends up after body)

3. On which browser/OS does the issue appear?
Windows 10, Firefox 76.0, Vivaldi 2.11.1811.49, Chromium 78.0.3904.108

4. Which version of Riot does it affect?
4.11.1, 4.12.4

5. How would you tag this issue?

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

The bug is not in Riot.js since you are using a component coming from another framework. Please open an issue on the elix repo to see if anyone could help you on it.

Side note: mixing multiple web components frameworks in the same application is never a good idea. Just stick with the one you like most.

geonanorch commented

First, thank you for the fast reaction (and for Riot.js!).

Some background: Riot.js does not come with a component library. I love Riot.js and want to see it grow; having a component library would help a lot with that in my opinion, therefore I am trying to integrate one.

I picked Elix because like Riot.js it seems to be rigorous and concerned about compatibility. It is also unopiniated, which is hard to find.

I understand that mixing multiple web component frameworks can be tricky. I am pretty sure that the elix people will tell me that the issue is not with them but with riot ;-) If I could pinpoint the issue I would, unfortunately I do not understand enough about either frameworks to do so. I was hoping that you could point out if/how Riot.js handles slots, especially named slots ? Or that you have suggestions about what the specific issue might be?

GianlucaGuarini commented

@geonanorch thank you for submitting your issue I will try to provide my support to your issue but actually we need to understand how elix handles the slots first to provide a possible solution or workaround

geonanorch commented

@GianlucaGuarini sure, and thank you. I submitted the case to elix, who rightfully pointed out that even a dummy vanilla custom Element exhibits the same behavior when combined with Riot.js, nothing to do with elix: https://plnkr.co/edit/atW1ZbisR5Mb0pIO

I will try to go through the code, see if I can spot something... So far I just noted that a quick grep (grep -w slot riot+compiler.js) shows no occurrence where slot would be used as naming attribute. Would you consider reopening this ticket?

GianlucaGuarini commented

Fixed in Riot.js@4.13.0

geonanorch commented

Thank you @GianlucaGuarini ! My issue is fixed, and I can also confirm that so far Riot.js works seamlessly in combination with the elix web components :-)

  • 👍1