<language-select> - Proof of Concept

For usage and styling see Page Source

The Web Component displays a button with language-name text label

UI and SVG Flags dependencies only load AFTER click, only when required, once!
This LOAD delay is measured in the console. Is it an acceptable UI delay?
I think download time is acceptable on a 4G connection.

GZip filesizes

• 2.7 kB select-button.min.js
• Loaded after click:
• 2.4 kB select-flags.min.js
• 30.6 kB elements.flagmeister.min.js - all SVG flags, no extra SVG downloads!

Use

Load with
<script src="https://language-select.github.io/select-button.min.js"></script>

Use:
<language-select selected="nl" languages="en,nl,es,pt,..."></language-select>

Language codes are ISO-Alpha3 country codes

Style with ::part (see Page Source)

Language selection sends a "language-select" Event up the DOM tree (see console)