Web Component for Copyright Years

https://gist.github.com/ceving/6e65886e04563ed9e6e42cc5f8d3f656

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>

{
  "by": "fagnerbrack",
  "descendants": 0,
  "id": 40246306,
  "score": 1,
  "time": 1714734370,
  "title": "Web Component for Copyright Years",
  "type": "story",
  "url": "https://gist.github.com/ceving/6e65886e04563ed9e6e42cc5f8d3f656"
}

{
  "author": "262588213843476",
  "date": "2024-03-28T12:00:00.000Z",
  "description": "Web Component for Copyright Years. GitHub Gist: instantly share code, notes, and snippets.",
  "image": "https://github.githubassets.com/assets/gist-og-image-54fd7dc0713e.png",
  "logo": "https://logo.clearbit.com/github.com",
  "publisher": "GitHub",
  "title": "Web Component for Copyright Years",
  "url": "https://gist.github.com/ceving/6e65886e04563ed9e6e42cc5f8d3f656"
}

{
  "url": "https://gist.github.com/ceving/6e65886e04563ed9e6e42cc5f8d3f656",
  "title": "Web Component for Copyright Years",
  "description": "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...",
  "links": [
    "https://gist.github.com/ceving/6e65886e04563ed9e6e42cc5f8d3f656"
  ],
  "image": "https://github.githubassets.com/assets/gist-og-image-54fd7dc0713e.png",
  "content": "<div>\n    <article><p></p><h2>Web Component for Copyright Years</h2><a target=\"_blank\" href=\"https://gist.github.com/ceving/6e65886e04563ed9e6e42cc5f8d3f656#web-component-for-copyright-years\"></a><p></p>\n<p>This Web Components keeps the year in your copyright notice up-to-date.</p>\n<div><pre><span>export</span> <span>{</span> <span>CopyrightYearElement</span> <span>}</span>\n<span>const</span> <span>name</span> <span>=</span> <span>\"copyright-year\"</span><span>;</span>\n<span>class</span> <span>CopyrightYearElement</span> <span>extends</span> <span>HTMLSpanElement</span> <span>{</span>\n  <span>constructor</span><span>(</span><span>)</span> <span>{</span>\n    <span>super</span><span>(</span><span>)</span><span>;</span>\n  <span>}</span>\n  <span>connectedCallback</span><span>(</span><span>)</span> <span>{</span>\n    <span>const</span> <span>year</span> <span>=</span> <span>new</span> <span>Date</span><span>(</span><span>)</span><span>.</span><span>getFullYear</span><span>(</span><span>)</span><span>;</span>\n    <span>const</span> <span>shadow</span> <span>=</span> <span>this</span><span>.</span><span>attachShadow</span><span>(</span><span>{</span> <span>mode</span>: <span>\"open\"</span> <span>}</span><span>)</span><span>;</span>\n    <span>const</span> <span>span</span> <span>=</span> <span>document</span><span>.</span><span>createElement</span><span>(</span><span>\"span\"</span><span>)</span><span>;</span>\n    <span>span</span><span>.</span><span>appendChild</span><span>(</span><span>document</span><span>.</span><span>createTextNode</span><span>(</span><span>`<span><span>${</span><span>this</span><span>.</span><span>textContent</span><span>}</span></span> - <span><span>${</span><span>year</span><span>}</span></span>`</span><span>)</span><span>)</span><span>;</span>\n    <span>shadow</span><span>.</span><span>appendChild</span><span>(</span><span>span</span><span>)</span><span>;</span>\n  <span>}</span>\n<span>}</span>\n<span>customElements</span><span>.</span><span>define</span><span>(</span><span>name</span><span>,</span> <span>CopyrightYearElement</span><span>,</span> <span>{</span><span>extends</span>: <span>'span'</span><span>}</span><span>)</span><span>;</span></pre></div>\n<p>Use the module.</p>\n<div><pre><span>&lt;</span><span>script</span> <span>type</span>=\"<span>module</span>\" <span>src</span>=\"<span>copyright-year.js</span>\"<span>&gt;</span><span>&lt;/</span><span>script</span><span>&gt;</span></pre></div>\n<p>Use the Web Component with the attribute <a target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is\"><code>is</code></a></p>\n<div><pre><span>&lt;</span><span>span</span><span>&gt;</span>&amp;copy; <span>&lt;</span><span>span</span> <span>is</span>=\"<span>copyright-year</span>\"<span>&gt;</span>2023<span>&lt;/</span><span>span</span><span>&gt;</span> Web Component Super Hero<span>&lt;/</span><span>span</span><span>&gt;</span></pre></div>\n<p>or as a dedicated element.</p>\n<div><pre><span>&lt;</span><span>span</span><span>&gt;</span>&amp;copy; <span>&lt;</span><span>copyright-year</span><span>&gt;</span>2023<span>&lt;/</span><span>copyright-year</span><span>&gt;</span> Web Component Super Hero<span>&lt;/</span><span>span</span><span>&gt;</span></pre></div>\n</article>\n  </div>",
  "author": "262588213843476",
  "favicon": "https://github.githubassets.com/favicons/favicon.svg",
  "source": "gist.github.com",
  "published": "",
  "ttr": 19,
  "type": "article"
}