Embeds HTML Into A Document Using Fetch API – html-include

Preview:

Description:

html-include is a web component that enables developers to embed external HTML content into a document using the Fetch API.

Created for helping users insert the content of one HTML file into another HTML file similar to the PHP’s include function.

The HTML is fetched from the URL contained in the src attribute. A load event is fired when the HTML is updated.

How to use it:

Install the package and import it as an es module.

# NPM
$ npm install html-include-element --save

import HTMLIncludeElement from 'html-include-element';

Or import the html-include component from a CDN.

<script type="module" src='https://unpkg.com/html-include-element'></script>

Define the path to the HTML file using the src attribute:

<html-include src="./test1.html"></html-include>

The fetch request is made using CORS by default. This can be changed with the mode attribute: “cors”, “no-cors”, or “same-origin”.

<html-include src="./test1.html" mode="no-cors"></html-include>

By default, the HTML is embedded into a shadow root. If the no-shadow attribute is present, the HTML will be embedded into the child content.

<html-include src="./test1.html" no-shadow></html-include>