<olympic-medal-ranking> with JavaScript

by WebComponents

HTML

<h1>One Web Component &lt;olympic-medal-ranking></h1>
    <h1>displays the whole Olympic Medal Ranking</h1>
    <h3><a href="https://github.com/olympic-medal-ranking/olympic-medal-ranking.github.io">
            Documentation and code available on GitHub</a></h3>
    
    <h2>&lt;olympic-medal-ranking>&lt;/olympic-medal-ranking></h2>
    <olympic-medal-ranking></olympic-medal-ranking>
    <style id="PARTS">
        /* global CSS styles pre-defined "parts" inside shadowDOM */
        olympic-medal-ranking {
            &::part(table) {
                max-width: 550px;
            }
    
            &::part(header) {
                font-size: 230%;
                color: goldenrod;
                text-shadow: 1px 1px 1px black;
            }
    
            &::part(medal) {
                font-weight: bold;
            }
    
            &::part(rank),
            &::part(countrycode),
            &::part(medaltotal) {
                font-weight: normal;
                color: grey;
            }
        }
    </style>
    <hr>
    <h2>&lt;olympic-medal-ranking total="5" lang="FRA">&lt;/olympic-medal-ranking></h2>
    <p>
        <a href="https://odf.olympictech.org/2024-Paris/codes/HTML/og_cc/Language.htm">IOC language codes</a>
    </p>
    <olympic-medal-ranking total="5" lang="FRA">Classement des MĂ©dailles Olympiques de Paris
        2024</olympic-medal-ranking>
    <style>
        olympic-medal-ranking[lang="FRA"] {
            &::part(header) {
                font-size: 170%;
                font-weight: bold;
            }
        }
    </style>
    <hr>
    <h2>&lt;olympic-medal-ranking flag="EU" filter="EU">&lt;/olympic-medal-ranking></h2>
    <olympic-medal-ranking flag="EU" filter="EU">
        European Union Medal Ranking
    </olympic-medal-ranking>
    <style>
        olympic-medal-ranking[flag="EU"] {
            &::part(thead) {
                background: #003399;
            }
    
            &::part(header) {
                background:...

JavaScript

!(function () {
    // safely load Flag WebComponents
    if (!customElements.get("flag-olympic"))
        document.head.append(Object.assign(document.createElement("script"), {
            src: "//flagmeister.github.io/elements.flagmeister.min.js",
            //async: true,
            //onload: () => console.log(`Loaded ${src}`)
        }))
})();
customElements.whenDefined("flag-olympic").then(() => {
    customElements.define("olympic-medal-ranking", class extends HTMLElement {
        async connectedCallback() {
            setTimeout(() => this.connectedCallback(), 3e5);
            //BUG!this.innerHTML = "Loading Olympic Medal Ranking..."; // show loading message
            const LANG = this.getAttribute("lang") || "ENG";
            // API will probably be different for future Olympics
            const API = `//olympics.com/OG2024/data/CIS_MedalNOCs~lang=${LANG}~comp=OG2024.json`;
            //const LANGS = "ENG,FRA,GER,SPA,ITA,CHI"; // optional UI languages
            const FLAGS =...