html-include-wc

Load remote HTML fragments with progressive enhancement. Fallback content shows until fetch completes.

Overview

The <html-include-wc> component fetches HTML from a URL and injects it. Any existing content serves as a fallback shown until the fetch completes (or if it fails).

<html-include-wc src="/partials/header.html"> <p>Loading header...</p> </html-include-wc>

Attributes

Attribute Type Default Description
src URL — URL to fetch HTML from.
data-mode string replace How to insert content: replace, append, or prepend.
data-lazy boolean — Defer loading until the element enters the viewport.
data-loading boolean — Auto-set while fetching. Can be styled with VB loading utilities.
data-loaded boolean — Auto-set after successful load.
data-error boolean — Auto-set if fetch fails.

Lazy Loading

Add data-lazy to defer the fetch until the element scrolls into view (with a 200px root margin).

<!-- Only loads when scrolled into view --> <html-include-wc src="/partials/comments.html" data-lazy> <p>Comments loading...</p> </html-include-wc>

Insert Modes

Control how the fetched HTML is inserted with data-mode.

<!-- Replace (default) --> <html-include-wc src="/partials/content.html" data-mode="replace"></html-include-wc> <!-- Append to existing content --> <html-include-wc src="/partials/more.html" data-mode="append"> <p>Existing content stays.</p> </html-include-wc> <!-- Prepend before existing content --> <html-include-wc src="/partials/banner.html" data-mode="prepend"> <p>This moves down.</p> </html-include-wc>

Events

Event Detail Description
html-include-load { src, html } Fired after successful load.
html-include-error { src, error } Fired if the fetch fails.
const include = document.querySelector('html-include-wc'); include.addEventListener('html-include-load', (e) => { console.log('Loaded:', e.detail.src); }); include.addEventListener('html-include-error', (e) => { console.error('Failed:', e.detail.error); });

JavaScript API

Method Description
reload() Re-fetch content from the current src.

Progressive Enhancement

Without JavaScript, the fallback content (whatever HTML is inside the element) remains visible. The src URL is never fetched, so users see the fallback. This makes it safe to use for non-critical content.

Accessibility

  • Fallback content ensures content is always available.
  • Error state shows a message when content fails to load (unless fallback content exists).
  • Changing the src attribute triggers a re-fetch, enabling dynamic content updates.

Related Elements

  • <iframe> — Embeds an entire document (heavier, sandboxed)