<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>

Blog

<pride-flag> Web Component

Danny Engelman

All required HTML:

creates:

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

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

Join Our Newsletter. No Spam, Only the good stuff.

Related