Slots are rendered as spans, but they contain divs

Developer Support
1

I have some locations where it looks like a slot is rendered as a SPAN. This is an issue, because I have DIVs inside the slot, and you shoul never really have DIVs inside SPANs.

In image 1, see the html. with the slot tag highlighted (an attribute within the slot tag)
Image 2 shows the component… Should generate

, and in this case, slot is a span
Image 3 shows the instantiation and slot contents… The horizontal stack is a div

Looking at the HTML, it looks like the span with class MenuLinkDesktop__slotTargetChildren__yumyV represents the slot itself. How can I change the type of this from a SPAN to a DIV? I can’t find any controls for it in hte sidebar…

image.png

image.png

image.png

2

ping

3

I second this issue!

image
image1274×332 62.6 KB

Also, even if I change the slot contents to span (so it becomes an ok span in a span), it seems that checking “HTML” creates a div by default… so I end up with a div inside of a span :face_with_spiral_eyes:

image
image1513×271 37.4 KB

4

Hi, could you share the projectId in which this issue is happening?

1 Like
5

Upon further inspection, it seems it was just this specific slot that output a span instead of a div

Perhaps because it is an older component/slot, but recreating the component/slot didn’t result in a span slot.

Project: Plasmic

Live: 與美國Loyola University Maryland政治系打開跨國循環經濟對話 | Leafer 最新消息

6

However I did notice that some components by default create a div which might conflict with surrounding spans.

For example, the reveal component:

image
image2019×602 135 KB

In this instance, I want to use the reveal component’s cascade (staggered) effect on a span of letters

7

In the above screenshot, I believe your hstack has manually been set to be a span. You should be able to change the tag to a div.

8

Yes, but I’m not sure if it will be read by screenreaders/search engines as “4, 0, +” or as the “40+”

9

Why do you have the “40+” in separate text elements instead of a single one?

Also, you might want to move the span inside the slot instead of around the Reveal component.

10

My main consideration was

  1. creating a staggered reveal affect (so they need to be separate spans/divs)
    image
    image765×284 24.3 KB
  2. making the CSS easier to manage/edit (hence wanting to group together), but I think I can actual do that on the reveal component itself instead
11

Seems like the children slot of the new default button is also a span

image
image901×405 104 KB