dairydemon.net/elements.js

class DDHeader extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		this.innerHTML = `
		<header>
			<img id="headerimg" src="/watching.jpg" alt="cows with glowing eyes" width=150 height=150 />
			<div id="headermain">
				<p><a id="homelink" href="/">dairydemon.net</a></p>
				<nav>
					<ul>
						<li><a href="https://social.dairydemon.net">mastodon</a></li>
						<li><a href="https://scm.dairydemon.net">git</a></li>
					</ul>
				</nav>
			</div>
		</header>
		`;
	}
}

class DDFooter extends HTMLElement {
	constructor() {
		super();
	}

	connectedCallback() {
		this.innerHTML = `
		<footer>
			<ul>
				<li><a href="/about.html">about</a></li>
			</ul>
		</footer>
		`;
	}
}

customElements.define("dd-header", DDHeader);
customElements.define("dd-footer", DDFooter);