Skip to content

Instantly share code, notes, and snippets.

@sz332

sz332/HTML Imports

Created February 21, 2018 14:40
Show Gist options
  • Save sz332/e9023a29e937aa511a30d75fd3fcc7d0 to your computer and use it in GitHub Desktop.
Save sz332/e9023a29e937aa511a30d75fd3fcc7d0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HTML Imports
child.html
<div class="part">
<style>
h3 {
color: red !important;
}
</style>
<h3>Warning!</h3>
<p>This page is under construction</p>
</div>
<div class="nopart">
<p>This does not do anything</p>
</div>
index.html
<html>
<head>
<link rel="import" href="child.html">
</head>
<body>
<p>Here comes the content of the child.html:</p>
<div id="wrapper"></div>
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from warning.html's document.
var el = content.querySelector('.part');
document.querySelector("#wrapper").appendChild(el.cloneNode(true));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment