Skip to content

Custom Element for adding a super simple way to import external HTML!

License

Notifications You must be signed in to change notification settings

Tram-One/html-import-element

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

html-import-element

Custom Element for adding a super simple way to import external HTML!

<!-- 1. include the script in your project -->
<script src="https://unpkg.com/html-import-element@1"></script>
<!-- 2. point to your external HTML files -->
<html-import src="./title.html"></html-import>
<!-- 3. PROFIT! -->

Install

Just include the following script in your page:

<script src="https://unpkg.com/html-import-element@1"></script>

Features

  • Supports inline HTML
  • Supports inline CSS (<style>...</style>)
  • Supports external CSS (<link rel="stylesheet">)
  • Supports inline script (<script>...</script>)
  • Supports external script (<script src="...">)

Example

<!-- title.html -->
<h1>HTML Imports are super cool!</h1>
<!-- index.html -->
<html lang="en">
	<head>
		<script src="https://unpkg.com/html-import-element@1"></script>
	</head>
	<body>
		<html-import src="./title.html"></html-import>
	</body>
</html>

That <body> will turn into:

<body>
	<h1>HTML Imports are super cool!</h1>
</body>

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.

About

Custom Element for adding a super simple way to import external HTML!

Resources

License

Stars

Watchers

Forks