HTML5 Web Component for Country Flags

Recently I discovered the huge free data sets on geonames.org, and I am actually planning a series of HTML5 Web Components which utilize this data. The first one is X-Flag – a custom HTML5 tag, able to display country flags out of a specified country code in three different sizes:

[sourcecode language=”html”]
<acidjs-xflag code="bg"></acidjs-xflag>
<acidjs-xflag code="cz" size="small"></acidjs-xflag>
<acidjs-xflag code="de" size="medium"></acidjs-xflag>
<acidjs-xflag code="mt" size="large"></acidjs-xflag>
[/sourcecode]

HTML Attributes of the <acidjs-xflag></acidjs-xflag> Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

• code – Required valid country code, for example "bg".
• size – Optional size of the flag, a choice between "small", "medium" and "large". Default: "medium".

JavaScript Methods of the <acidjs-xflag></acidjs-xflag> Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.

Check the demo on this page. On it you will also find a download link. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.