What are the key takeaways from this Shop Talk Show episode?

Key insights include: **Parser Blocking Requirement:** Native HTML includes must block parsing by default to prevent layout shifts, similar to non-deferred script tags. Async attribute could enable opt-in non-blocking behavior, but default blocking prevents content jumping that degrades core web vitals and user experience across production sites.; **Complete Tree Constraint:** Included HTML must form complete document fragments where unclosed tags auto-close at include boundaries, preventing split-tag patterns like opening divs in one file and closing in another. This mirrors JavaScript ESM behavior where imports cannot split code blocks across files, maintaining parseable structure.; **Streaming Implementation:** Browser should stream included content as it downloads rather than waiting for complete response, enabling progressive rendering. This matches native HTML parsing behavior and outperforms fetch-then-innerHTML patterns that delay content display until full download completes, especially on slow connections with large responses.

What did Jake Archibald discuss on Shop Talk Show?

Jake Archibald joins to explore why HTML lacks native includes while CSS and JavaScript can import themselves, proposing solutions for parser-blocking streaming includes with complete tree requirements and CORS checks. Key topics include: **Parser Blocking Requirement:** Native HTML includes must block parsing by default to prevent layout shifts, similar to non-deferred script tags. Async attribute could enable opt-in non-blocking behavior, but default blocking prevents content jumping that degrades core web vitals and user experience across production sites.; **Complete Tree Constraint:** Included HTML must form complete document fragments where unclosed tags auto-close at include boundaries, preventing split-tag patterns like opening divs in one file and closing in another. This mirrors JavaScript ESM behavior where imports cannot split code blocks across files, maintaining parseable structure..

How long is this episode of Shop Talk Show?

This episode is 65 minutes long. SignalCast provides an AI-generated summary so you can get the key insights in about 3 minutes.

Shop Talk Show

668: Jake Archibald on Native HTML Includes

June 9, 2025

65 min episode · 2 min read

Jake Archibald

Episode

65 min

Read time

2 min

Topics

Remote Work, Design & UX, Software Development

AI-Generated Summary

Published Dec 25, 2025

Key Takeaways

✓Parser Blocking Requirement: Native HTML includes must block parsing by default to prevent layout shifts, similar to non-deferred script tags. Async attribute could enable opt-in non-blocking behavior, but default blocking prevents content jumping that degrades core web vitals and user experience across production sites.
✓Complete Tree Constraint: Included HTML must form complete document fragments where unclosed tags auto-close at include boundaries, preventing split-tag patterns like opening divs in one file and closing in another. This mirrors JavaScript ESM behavior where imports cannot split code blocks across files, maintaining parseable structure.
✓Streaming Implementation: Browser should stream included content as it downloads rather than waiting for complete response, enabling progressive rendering. This matches native HTML parsing behavior and outperforms fetch-then-innerHTML patterns that delay content display until full download completes, especially on slow connections with large responses.
✓Security Considerations: Implementation requires CORS checks and text/html content-type validation to prevent XSS attacks. Existing sites using HTML tag blacklists rather than allowlists face vulnerability since new include tags could inject scripts from external sources, potentially requiring meta-tag opt-in similar to form styling features.
✓Lower-Level API First: Standards bodies prefer shipping JavaScript streaming API before declarative HTML tags, enabling response.body pipe-to-element functionality. This provides building blocks for web component polyfills and proves streaming viability before committing to parser-level changes that affect all browsers permanently.

What It Covers

Jake Archibald joins to explore why HTML lacks native includes while CSS and JavaScript can import themselves, proposing solutions for parser-blocking streaming includes with complete tree requirements and CORS checks.

Key Questions Answered

•Parser Blocking Requirement: Native HTML includes must block parsing by default to prevent layout shifts, similar to non-deferred script tags. Async attribute could enable opt-in non-blocking behavior, but default blocking prevents content jumping that degrades core web vitals and user experience across production sites.
•Complete Tree Constraint: Included HTML must form complete document fragments where unclosed tags auto-close at include boundaries, preventing split-tag patterns like opening divs in one file and closing in another. This mirrors JavaScript ESM behavior where imports cannot split code blocks across files, maintaining parseable structure.
•Streaming Implementation: Browser should stream included content as it downloads rather than waiting for complete response, enabling progressive rendering. This matches native HTML parsing behavior and outperforms fetch-then-innerHTML patterns that delay content display until full download completes, especially on slow connections with large responses.
•Security Considerations: Implementation requires CORS checks and text/html content-type validation to prevent XSS attacks. Existing sites using HTML tag blacklists rather than allowlists face vulnerability since new include tags could inject scripts from external sources, potentially requiring meta-tag opt-in similar to form styling features.
•Lower-Level API First: Standards bodies prefer shipping JavaScript streaming API before declarative HTML tags, enabling response.body pipe-to-element functionality. This provides building blocks for web component polyfills and proves streaming viability before committing to parser-level changes that affect all browsers permanently.

Notable Moment

Jake revealed he resigned from his position the day of recording, creating an unexpected announcement moment. The hosts reacted with audible surprise when he privately shared his next role, which involves returning to a previous type of work in the web standards space.

Know someone who'd find this useful?

Episode Transcript

Hey there. Shopify Phoenix. You're listening to another episode of the Shop Talk Show. I'm Dave Rupert with mister Chris Coyer. Hey, Chris. Who do we have in the studio today? Oh, right to it, Dave. I love your Oh, who are who are we including in this studio today? I like that. Yeah. I'm gonna import jake'sdodgeball.html Hello. Into this podcast. Hello. Hello. Hello. Yeah. Jake is on. It's it's awesome. I would love to have Jake on anytime, but I have we have him under the best possible circumstances, which is perhaps you'll all recall not so long ago in the past when I published a Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu Lulu L and and and I'll do the setup for it in this way. CSS is a language that can import itself. Use the import keyword. And then you can have two CSS files, and they smash together as far as the browser is concerned. Or, well, maybe it treats them as separate files, but you you link up one of them and you get two of them. JavaScript can do the same thing, perhaps only somewhat recently with the with ESM, I guess, you know, within the import keyword. JavaScript is a language that can import itself. Can HTML import itself? No. It cannot. It can import images. It can import other languages. But there is no such thing as an, what I'll call and will probably call for the rest of this episode, an HTML include. They don't exist. It's not a thing that can happen. Is that true, Jake? It's true. Right? That is true. Yeah. No. It it's it's it is not a feature that exists. I mean yeah. Okay. Someone's gonna be saying, iframe sort of thing. But, like, yeah. So so that is the Object tag could do that. The object tag. Yeah. The I okay. When people say the object tag can do it, like, there's no difference between the object tag and an iframe. Like, in in terms of this, in terms of document inclusion. Yeah. It it is I mean, like, just to be real specific about it, it does put that HTML on that page, but it really is like it has, like, a brick wall around it. It's not the same thing. The CSS cannot, like, penetrate through that wall. Its its intrinsic sizing doesn't grow with the content inside of it and stuff. It's really just not a possible scenario here. So we should throw that one out right now. Like, nope. It's not iframes. It's not object. That's not what I mean. I mean, just put There's a there's an interesting thing around that because it this was on Blink dev last week, the week before. Chrome is working on, responsive iframes. So, so …

Get the full transcript (12,152 words) + summary by email — free

One-time email with the complete transcript and AI summary of this episode. No account needed.

One email, no spam. We’ll also show you what SignalCast does.

Browse all Shop Talk Show transcripts →