lunaDOM Docs
lunaDOM Docs

lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.

v0.0.25

Include

Dynamically load and inject external HTML fragments.

The <luna-include> component fetches and injects external HTML fragments into the DOM dynamically.

Paths

/lunadom/components/include/include.js REQUIRED

Example

Dynamic Partial Loading

Fetch and inject external HTML fragments into the DOM seamlessly.

Fetching partial...
Force Reload Fragment

Customization

Slots
default - Default slot for content that will be displayed after loading
loading - Custom content to display while the remote resource is being fetched
Attributes
src - The URL of the HTML file to include
CSS Variables
--luna-accent - Color of the default loading spinner
Events
luna-load-start - Emitted when a load operation begins
luna-load - Emitted when the content has successfully loaded
luna-error - Emitted when the content fails to load
Methods
reload() - Force reload the content

Example Code

<!-- Basic Include --> <luna-include src="example.html"> <div slot="loading">Loading...</div> </luna-include> <!-- Reload Programmatically --> <luna-button onclick="document.querySelector('luna-include').reload()"> Reload </luna-button>