毎年変更するのが面倒なCopyrightの今年の年をJavaScriptで表示させる

2020をJavaScriptで表示

<script>document.write(new Date().getFullYear());</script>

　↓

2020

よくあるコピーライトをJavaScriptで表示

© 2020 hogehoge.com 

　↓

© <script>document.write(new Date().getFullYear());</script> hogehoge.com

● 今年の年を表示させるWebComponentsを作る

my-copyright.js

class MyCopyrightElement extends HTMLElement {
    static observedAttributes = ['text'];
    connectedCallback() {
        const text = this.getAttribute('text');
        this.innerText = `Copyright ©${new Date().getFullYear()} ${text}`;
    }
}
customElements.define('my-copyright', MyCopyrightElement);

html

  <my-copyright text="株式会社 テストテストカンパニー"></my-copyright>
  <script src="my-copyright.js"></script>

↓ このように表示されます

Copyright ©2022 株式会社 テストテストカンパニー