DEV Community

Cover image for <pride-flag> Web Component
Danny Engelman
Danny Engelman

Posted on • Edited on

<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();
  }
});
Enter fullscreen mode Exit fullscreen mode

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]]);
    }
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

creates:

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

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




Top comments (2)

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

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

Collapse
 
durbonca profile image
Manuel Duran

Wonderful contribution 🏳️‍🌈🏳️‍⚧️