https://github.com/tram-one/html-import-element
Custom Element for adding a super simple way to import external HTML!
https://github.com/tram-one/html-import-element
Last synced: 9 months ago
JSON representation
Custom Element for adding a super simple way to import external HTML!
- Host: GitHub
- URL: https://github.com/tram-one/html-import-element
- Owner: Tram-One
- License: mit
- Created: 2023-08-27T05:40:54.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-30T02:04:06.000Z (over 2 years ago)
- Last Synced: 2025-09-04T00:20:49.133Z (10 months ago)
- Language: HTML
- Homepage:
- Size: 9.77 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-import-element
Custom Element for adding a super simple way to import external HTML!
```html
```
## Install
Just include the following script in your page:
```html
```
## Features
- [x] Supports inline HTML
- [x] Supports inline CSS (`...`)
- [x] Supports external CSS (``)
- [x] Supports inline script (`...`)
- [x] Supports external script (``)
## Example
```html
<!-- title.html -->
<h1>HTML Imports are super cool!</h1>
```
```html
<!-- index.html -->
<html lang="en">
<head>
<script src="https://unpkg.com/html-import-element@1">
` will turn into:
```html
HTML Imports are super cool!
```
And that's it! Read the source code if you want to see what's going on, but we do a basic fetch, and then inject the content in the page.
## Development
You can run `npm start`, and navigate to the `/test` or `/example` pages, which validate and show the project use-cases.