Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@cferdinandi
Created November 10, 2022 16:40
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cferdinandi/5d3e1b49e8c70267e578b17ef4e2af83 to your computer and use it in GitHub Desktop.
Save cferdinandi/5d3e1b49e8c70267e578b17ef4e2af83 to your computer and use it in GitHub Desktop.
<h2>Hi, I'm Chris Ferdinandi.</h2>
<p><strong>I help people learn vanilla JavaScript,</strong> and I believe there’s a simpler, more resilient way to make things for the web.</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Includes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>Hate the complexity of modern front-end web development?</h1>
<p>Me too! I send out a short email each weekday on how to build a simpler, more resilient web. Join over 13k others.</p>
<include-html path="about.html">
<a href="about.html">Learn more about me.</a>
</include-html>
<script>
// Extend the HTMLElement class to create the web component
class IncludeHTML extends HTMLElement {
/**
* Get and render external HTML
* @param {String} path The path to the external HTML
*/
async #getHTML (path) {
// Get the page
let request = await fetch(path);
if (!request.ok) return;
// Get the HTML
this.innerHTML = await request.text();
}
/**
* The class constructor object
*/
constructor () {
// Always call super first in constructor
super();
// Get the source HTML to load
let path = this.getAttribute('path');
if (!path) return;
// Render HTML
this.#getHTML(path);
}
}
// Define the new web component
if ('customElements' in window) {
customElements.define('include-html', IncludeHTML);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment