X-Tag Web Components

One of the awesome parts at working at Mozilla is being able to see and use projects from fellow engineers before they are shared with the world. One such effort comes from Daniel Buchner: X-Tag. X-Tag is a cross-browser web component library that uses custom tags and a bit of JavaScript to create components we've been creating for years:

• Accordions
• Tab Wigets
• Sliding Panels (think slideshows)
• Flipping Panels (think mobile apps)
• Modal Dialogs

There are even a few advanced components like:

• Maps
• Autosuggest Inputs
• Pagination

Each piece of these components is completely styleable, allowing for the most flexible components possible. Let's have a quick look at how these components are created!

X-Tag Setup

Regardless of which X-Tag component you'd like to use, you must include the main x-tag.js script. For every component you'd like to use, you'll need to include it's Javascript and CSS file:

<script type="text/javascript" src="x-tag/x-tag.js"></script>

<!-- Accordion -->
<link rel="stylesheet" type="text/css" href="x-tag/elements/accordion/accordion.css" />
<script type="text/javascript" src="x-tag/elements/accordion/accordion.js"></script>

Using X-Tag Components

With the necessary JavaScript files in place, you can now use the X-Tag components!

<!-- create an accordion -->
<h3>Accordion</h3>
<x-accordion id="accordion">
	<x-toggler selected="true">Toggler 1</x-toggler>
	<div>
		This is the content.
	</div>
	<x-toggler>Toggler 2</x-toggler>
	<div>
		This is the content 2.
	</div>
	<x-toggler>Toggler 3</x-toggler>
	<div>
		This is the content 2.
	</div>
</x-accordion>

<!-- create a tab box -->
<h3>TabBox</h3>
<x-tabbox id="tabbox">
	<x-tabs>
		<x-tab selected="true">Tab 1</x-tab>
		<x-tab>Tab 2</x-tab>
		<x-tab>Tab 3</x-tab>
	</x-tabs>
	
	<x-tabpanels>
		<x-tabpanel selected="true">
			<p>
				This is tab content 1
			</p>
		</x-tabpanel>
		<x-tabpanel>
			<p>
				This is tab content 2
			</p>
		</x-tabpanel>
		<x-tabpanel>
			<p>
				This is tab content 3
			</p>
		</x-tabpanel>
	</x-tabpanels>
</x-tabbox>

<!-- create a map -->
<x-map data-key="Cloudmade/OpenStreetMaps-API-Key"></x-map>

So why X-Tag? Take a step back and think about one of the oldest JavaScript tricks in the book: INPUT placeholders. It took almost a decade to get that basic functionality into the spec. Think about how little has been done in the way of FORM child enhancements. X-Tag is a first step in pushing for native component support in browsers.

Browser Support

X-Tag supports all A-grade browsers. IE9 and Opera support is almost complete, IE8 support will be following shortly.

What Do You Think?

I love the X-Tag library. Simple, effective, customizable. There are many libraries which accomplish the components of X-Tag, but this approach is much simpler, and (hopefully) a step toward native support. I wouldn't mind seeing a sibling theme library though. What do you think of X-Tag? Have any ideas for more components that should live within X-Tag?