668: Jake Archibald on Native HTML Includes

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.