Skip to content

Instantly share code, notes, and snippets.

@knowler

knowler/custom-element-expander.js

Last active November 10, 2023 19:49
Show Gist options
  • Save knowler/c4c299ad2c4b35f56ef37a400d4c231a to your computer and use it in GitHub Desktop.
Save knowler/c4c299ad2c4b35f56ef37a400d4c231a to your computer and use it in GitHub Desktop.
Download ZIP
deno run custom-element-expander.js
Raw
custom-element-expander.js
import {parseHTML} from "https://esm.sh/linkedom";
// This is just so IDEs use HTML syntax highlighting.
const html = String.raw;
const { window, document, customElements, HTMLElement } = parseHTML(html`
<!doctype html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<site-header></site-header>
</body>
</html>
`, { location: "https://example.com/" });
class SiteHeaderElement extends HTMLElement {
connectedCallback() {
this.innerHTML = html`
<header>
<nav aria-label="primary">
<ul>
<li><nav-link href="/">Home</nav-link></li>
<li><nav-link href="/about">About</nav-link></li>
<li><nav-link href="/contact">Contact</nav-link></li>
</ul>
</nav>
</header>
`;
}
}
class NavLinkElement extends HTMLElement {
get href() { return this.getAttribute("href"); }
isCurrent() {
const location = new URL(window.location);
const url = new URL(this.href, location.origin);
return url.href === location.href;
}
connectedCallback() {
const anchor = this.ownerDocument.createElement("a");
if (this.isCurrent()) anchor.setAttribute("aria-current", "page");
anchor.setAttribute("href", this.href);
anchor.textContent = this.textContent;
this.replaceChildren(anchor);
}
}
const customElementsMap = new Map([
['site-header', SiteHeaderElement],
['nav-link', NavLinkElement],
])
for (const [elementName, elementClass] of customElementsMap) {
customElements.define(elementName, elementClass);
}
console.log(document.toString());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment