Skip to content

Instantly share code, notes, and snippets.

@isao

isao/Web Component for Copyright Years.md

Created March 29, 2024 17:58
Show Gist options
  • Save isao/e058d4bc113e13508e89d5e58d160ede to your computer and use it in GitHub Desktop.
Save isao/e058d4bc113e13508e89d5e58d160ede to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ceving ceving revised this gist Mar 27, 2024. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion Web Component for Copyright Years.md
    View file
    Original file line number Diff line number Diff line change
    @@ -29,7 +29,7 @@ Use the module.
    <script type="module" src="copyright-year.js"></script>
    ```

    Use the Web Component with the attribute `id`
    Use the Web Component with the attribute [`is`][1]

    ```html
    <span>&copy; <span is="copyright-year">2023</span> Web Component Super Hero</span>
    @@ -40,3 +40,5 @@ or as a dedicated element.
    ```html
    <span>&copy; <copyright-year>2023</copyright-year> Web Component Super Hero</span>
    ```

    [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is
  2. @ceving ceving revised this gist Mar 27, 2024. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion Web Component for Copyright Years.md
    View file
    Original file line number Diff line number Diff line change
    @@ -29,8 +29,14 @@ Use the module.
    <script type="module" src="copyright-year.js"></script>
    ```

    Use the Web Component.
    Use the Web Component with the attribute `id`

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

    or as a dedicated element.

    ```html
    <span>&copy; <copyright-year>2023</copyright-year> Web Component Super Hero</span>
    ```
  3. @ceving ceving created this gist Mar 27, 2024.
    36 changes: 36 additions & 0 deletions Web Component for Copyright Years.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    # Web Component for Copyright Years

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

    ```javascript
    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.

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

    Use the Web Component.

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