Basic Usage

Import an external HTML snippets.

<p>I am html</p>

<k-import src="import-me.html"></k-import>

<k-import src="import-me.html" rendered="true">
  <p>I am html</p>
</k-import>

JavaScript Reference

Constructor

Extends Component

new Import()

Requirements

• Component

Properties

src: string

The source URL of the HTML snippet to import. Syncs to src attribute.

Methods

fetch(): Promise

Fetches and renders the HTML snippet from the current src URL. Called automatically when src changes.

Events

src-change

Fired when the src property changes. detail: { src }

fetch-start

Fired when the HTTP fetch begins. detail: { src }

fetch-response

Fired when the HTTP response is received. detail: { src, status }

content-rendered

Fired after the HTML content has been injected into the DOM and all inline scripts have been executed.

const importer = document.querySelector('k-import');
importer.addEventListener('src-change', e => console.log('src set:', e.detail.src));
importer.addEventListener('fetch-start', e => console.log('fetching:', e.detail.src));
importer.addEventListener('fetch-response', e => console.log('response status:', e.detail.status));
importer.addEventListener('content-rendered', () => console.log('content ready'));