Live data from Hacker News

Streaming HTML out of order without JavaScript

lamplightdev.com

101–104 of 104 posts

Re: Streaming HTML out of order without JavaScript

#101
post #76
post #4

At the core, this seems to be about shadowrootmode=open, a new html feature which already landed in Chromium and Safari: This is and sunny funny renders as: This is funny and sunny So it looks like HTML got a bit of a native template system now. What I have been wanting for decades is a native template system in HTML which supports urls. Similar the the script tag, but which loads html: I always wondered why this was…

So... iframes that stay in the context of the parent element? You'd need some tight CSP coupling to prevent it from being a security disaster.

Not sure how it would have any concerns greater than importing JavaScript files.

Re: Streaming HTML out of order without JavaScript

#103
post #70

If I add multiple slots with the same name it shows all of them. s1 s2 s3 setTimeout(_=> t.innerHTML += ` three `, 1000) setTimeout(_=> t.innerHTML += ` one `, 2000) setTimeout(_=> t.innerHTML += ` two `, 3000) setTimeout(_=> t.innerHTML += ` ONE!! `, 4000) I guess there is no way to replace a slot, again and again?

You can hide the previous slot contents with CSS: https://jsbin.com/rinevokiwi/edit?html,output

Re: Streaming HTML out of order without JavaScript

#104
post #4

At the core, this seems to be about shadowrootmode=open, a new html feature which already landed in Chromium and Safari: This is and sunny funny renders as: This is funny and sunny So it looks like HTML got a bit of a native template system now. What I have been wanting for decades is a native template system in HTML which supports urls. Similar the the script tag, but which loads html: I always wondered why this was…

Includes are different than this. Pretend the template is site header, site nav, body content, and footer; each being a slot. The server then streams body content, site header, site nav and footer in that order. Now more important content gets rendered first without any JS. This technique would be a lot more usable though when shadow roots become open style-able. It is kinda funky having to apply your CSS separately…

You can have a global stylesheet and @import it inside Shadow DOM or use ::part() from outside of it.
Post reply on HN