<pride-flag> Web Component

Ain't the world a great place; 33 years active on the Internet and this post got me my very first hate mail. To the sender: I love you too!

---

In his blog-post Pride Flags Josh Comeau does an excellent job creating an animated pride flag.

• He creates good HTML
• He adds cool CSS gradients
• He writes native JavaScript
• And then, to put the Pride Flag in the DOM, he spoils it all by loading a 109 Kb dependency:

He was just three lines short from creating a native JavaScript Web Component <pride-flag> that would run in every Framework, in every modern browser, without! ANY dependencies

customElements.define("pride-flag", class extends HTMLElement {
  connectedCallback(){
    this.innerHTML = PrideFlag();
  }
});

All credits to Josh, I refactored his code a bit, so https://pride-flag.github.io delivers a native JavaScript Web Component <pride-flag>

Sources: https://github.com/pride-flag/pride-flag.github.io

Extending <pride-flag> itself with:

customElements.define('pride-pan-flag', 
  class extends customElements.get('pride-flag') {
    connectedCallback() {
        super.connectedCallback([[331, 100, 55], [50, 100, 50], [200, 100, 55]]);
    }
});
customElements.define('pride-trans-flag', 
  class extends customElements.get('pride-flag') {
    connectedCallback() {
        super.connectedCallback([[200, 85, 70], [350, 85, 85], [0, 0, 100], [350, 85, 85], [200, 85, 70]]);
    }
});

adds 2 more Web Components.

All required HTML:

<script src="https://pride-flag.github.io/element.js"></script>

<style>
  flags {display:grid; grid: 1fr/1fr 1fr 1fr; gap:1em}
</style>

<flags>
  <pride-flag columns="10">
      </pride-flag>
  <pride-pan-flag columns="100" delay="20" billow="1">
      </pride-pan-flag>
  <pride-trans-flag columns="200" delay="20" speed="1700" billow="2">
      </pride-trans-flag>
</flags>

creates:

Flag Configurator at: https://pride-flag.github.io

More Flags in a Web Component: https://flagmeister.github.io

---

Comments

[Danny Engelman]

[James now deleted his comment, but there was a screenshot made]

Hi James, which is most likely not your real name, you signed on today.

I am leaving your comment for all to read. A reminder there are people who care for each other no matter religion, race or color of hair. And there are people like you, who think they are superior and only dare to voice that opinion anonymously.

[Manuel Duran]

Wonderful contribution 🏳️‍🌈🏳️‍⚧️