Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Getting Start HTML Import #763

Open
tomoyukikashiro opened this issue Aug 1, 2022 · 0 comments
Open

Getting Start HTML Import #763

tomoyukikashiro opened this issue Aug 1, 2022 · 0 comments
Labels
published

Comments

@tomoyukikashiro
Copy link
Owner

date: 2014-11-01
title: Getting Start HTML Import
slug: start-html-import
lang: en-US
tags: [webcomponent]

Outline

We've not had way to import html until now.
But from now, we can import html documents using html import.

Capability

can i use : http://caniuse.com/#feat=imports

At the moment (2014/11/01) we can it only Google Chrome, Opera, and Chrome for Android

Usage

Import HTML from main HTML

You can import HTML using <link rel="import">

main HTML

<head>
	<link rel="import" href="/path/to/imports/stuff.html">
</head>

You have to append elements you import if you want to use it.

Imported HTML (stuff.html)

<nav>
	<ul>
		<li>page 1</li>
		<li>page 2</li>
		<li>page 3</li>
	</ul>
</nav>

<script>
	var importDoc = document.currentScript.ownerDocument; // imported HTML
	var mainDoc = document; // main HTML
	var nav = importDoc.querySelector('nav');
	mainDoc.querySelector('.navi-outer').appendChild(nav.cloneNode(true));
</script>

You can also use imported elements from main HTML like that.

main HTML

var link = document.querySelector('link[rel="import"]');
var nav = link.import.querySelector('nav');
document.querySelector('.navi-outer').appendChild(nav.cloneNode(true));

Import CSS in imported HTML

Imported HTML

<link rel="stylesheet" href="/path/to/imports/stuff.css">

You have to append link tag if you want to apply that style.

Imported HTML (stuff.html)

<link rel="stylesheet" href="/path/to/imports/stuff.css">
<script>
	var importDoc = document.currentScript.ownerDocument; // imported HTML
	var mainDoc = document; // main HTML
	var style = importDoc.querySelector('link[rel="stylesheet"]');
	mainDoc.head.appendChild(style.cloneNode(true));
</script>

Javascript context in imported HTML

You can use those contexts in imported document.

  • imported HTML context using document.currentScript.ownerDocument.
  • main HTML context using document

Notice

  • Resources from other origins need to be CORS-enabled.
  • Browser of course will cache each document you import.
  • Javascript are parsed and executed once if you import same url html twice.
  • Do not block main document parsing.
  • You have to add css and html tag after import html.

References
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
published
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tomoyukikashiro