First placeholder not rendered in FF and Safari

[lorenzofox3]

I was wondering why the first placeholder is not rendered in FF and Safari while the placeholder for each item is correctly "streamed".

do you have any idea ?

Screen.Recording.2024-03-29.at.15.05.41.mov

Thanks.

[juntuu]

This seems related to the note in the blog post:

All browsers support streaming HTML, but Safari seems to have a higher threshold for when to trigger streaming - this seems to be around 512 bytes. The consequence of this is that Safari will buffer the content until that threshold is reached, and then render what is has before streaming the rest.

For me, testing on Safari, adding some content (the <p> tag) just before or within the slot did trigger the first placeholder to be shown. And that's about the minimal amount that worked:

<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet diam et erat bibendum imperdiet</p>
  <slot name="list">Loading...</slot>
</main>

Edit. Found a webkit bug report on similar issue https://bugs.webkit.org/show_bug.cgi?id=252413

[lorenzofox3]

For the record, I ended up building a streaming template engine. Very inspiring post you wrote. thanks !