knowler/custom-element-expander.js

## 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());
	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());