https://github.com/reiver/html-include
A web component for doing HTML includes: <html-include src="..."></html-include>
https://github.com/reiver/html-include
edge-side-include esi web-component
Last synced: 2 months ago
JSON representation
A web component for doing HTML includes: <html-include src="..."></html-include>
- Host: GitHub
- URL: https://github.com/reiver/html-include
- Owner: reiver
- License: mit
- Created: 2020-11-25T19:22:05.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-26T01:27:21.000Z (over 4 years ago)
- Last Synced: 2025-01-25T13:08:39.735Z (4 months ago)
- Topics: edge-side-include, esi, web-component
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ``
`` is a **web component** that lets you _include_ HTML at one URI into another HTML page.
You can think of this as a web-browser-side edge-side-include (ESI) — if you are familar with the server side ``.
## Example
```html
Example
Hello world!
```
## Basic Usage
The most basic way of using `` is:
```html
```
```html
```
```html
```
Note that in this _basic usage_ we just set the `src` attribute to point to the URI we want to include.
## Advanced Usage
A more advanced way using `` is:
```html
```
Note the addition of the ‘title’ attribute.
This usage will show a more informative loading message.
I.e., instead of showing:
> Loading…
… it will show:
> Loading “footer”…
I.e., it includes whatever is in the ‘title’ attribute in the loading-message.
## Debugging
If you need to debug what `` is doing you can use the `debug="true"` attribute. For example:
```html
```
```html
```
Note the addition of the ‘debug’ attribute, with the value set to the string "true".
This will call console.log() with logs that try to provide inside into what is doing internally.