It’s that time of year again, so I thought I’d do a quick post on the simple bit of JavaScript I use to keep the copyright date current in the static sites I build. Add the hidden attribute to your container element markup so that if JS fails for some reason it won’t display.

class CopyrightElement extends HTMLElement {
connectedCallback() {
this.innerHTML = `© ${new Date().getFullYear()}`;
}
}

if ('customElements' in window) {
window.customElements.define('copyright-element', CopyrightElement);
}

As a bonus, here’s a tiny custom element I made that does the same thing. This way you can just wrap your static text in a `` tag and as long as the browser is capable and you scripts loaded, you get an upgraded, up-to-date footer copyright date.

(function() {
document.addEventListener('DOMContentLoaded', function() {
// Update this to whatever selector you want.
const element = document.querySelector('[data-copyright]');
if (element) {
element.removeAttribute('hidden');
element.innerHTML = `© ${new Date().getFullYear()}`;
}
});
})();