NativeSFC

GitHub

Native Single File Components - Load single HTML files as Web Components.

Zero build step. Pure browser magic with automatic style scoping, ESM support, and URL rewriting.

Quick Start

import { loadComponent } from 'native-sfc';

// Load a component from an HTML file
loadComponent('my-card', './components/card.html');

// Use it anywhere in your HTML
// <my-card title="Hello"></my-card>

API Reference

loadComponent(name, url)

Load a component from an HTML file and register it as a custom element.

name: The custom element name (e.g., "my-component"). Must contain a hyphen.
url: The URL to the component HTML file, relative to the importer.

defineComponent(setup)

A helper function for dual-mode component definition.

setup: A function that receives { onConnected, onDisconnected } callbacks and returns component state.

Behavior: When inside loadComponent: defines a web component class with lifecycle callbacks. In document context: runs with document as root.

Live Demo

Watch NativeSFC load components in real-time: