|Official Page:||Go to website|
|Last Update:||April 25, 2019|
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
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:
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>