Web Component for Copyright Years

This Web Components keeps the year in your copyright notice up-to-date.

export { CopyrightYearElement }

const name = "copyright-year";

class CopyrightYearElement extends HTMLSpanElement {
  constructor() {
    super();
  }
  connectedCallback() {
    const year = new Date().getFullYear();
    const shadow = this.attachShadow({ mode: "open" });
    const span = document.createElement("span");
    span.appendChild(document.createTextNode(`${this.textContent} - ${year}`));
    shadow.appendChild(span);
  }
}

customElements.define(name, CopyrightYearElement, {extends: 'span'});

Use the module.

<script type="module" src="copyright-year.js"></script>

Use the Web Component with the attribute is

<span>&copy; <span is="copyright-year">2023</span> Web Component Super Hero</span>

or as a dedicated element.

<span>&copy; <copyright-year>2023</copyright-year> Web Component Super Hero</span>