ceving/Web Component for Copyright Years.md

## Web Component for Copyright Years.md

      
    Raw
  

              Web Component for Copyright Years.md
            
          
    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>