Anyway, with the Web Components spec currently in the works of standard bodies and browser makers, HTML5 is going to take a next step towards a full-fledged RIA platform. Web Components roughly includes templates, decorators and custom tags. Rather a technical implication than a feature is the shadow DOM which divides the DOM in initial content and shadow elements.
For custom elements there is already a working implementation available. At x-tags.org Mozilla provides an polyfill in JavaScript which is on standards track. The strategy is obvious: create a specification of a feature, provide polyfill implementation for early use which finally can be replaced by a native implementation. Where this is possible, this is a good plan! It also helps to get early feedback on something like a 'reference implementation'. So how does this x-tag thingy work in use? It's pretty simple. See how to create a map:
<head>
<link rel="stylesheet" href="/x-tags/map/map.css"/>
<script src="/x-tags/x-tag.js"> </script>
<script src="/x-tags/map/map.js"> </script>
<style>
#detail-map {
box-sizing: border-box;
width: 100%;
height: 480px;
}
x-map {
border: 1px solid #black;
}
</style>
</head>
<body>
<x-map id="detail-map" data-key="xxx"></x-map>
</body>
<link rel="stylesheet" href="/x-tags/map/map.css"/>
<script src="/x-tags/x-tag.js"> </script>
<script src="/x-tags/map/map.js"> </script>
<style>
#detail-map {
box-sizing: border-box;
width: 100%;
height: 480px;
}
x-map {
border: 1px solid #black;
}
</style>
</head>
<body>
<x-map id="detail-map" data-key="xxx"></x-map>
</body>
The code samples shows how to include the xtag library providing support for all browsers including IE9 and better (so it completely safe for the mobile web). The map.js script registers a custom element and defines form and behavior. Once registered, instances of the element are recognized in the DOM and initialized accordingly. The web component spec defines a couple of life cycle events for custom elements (like created, inserted or attributeChanged). This way logic shipped with a custom element can be hooked in and do its augmenting work.
These technical details are basically interesting for component or framework developers only. An application developer does not have to fiddle around often with these details. More often he is interested in a set of components to quickly wire up an application. That's what x-tags is meant for. At x-tags.org you will find a JavaScript implementation of x-tag which ships with a bunch of nice components. I built a first FirefoxOS application with these and found them very handy. There is an x-slidebox and an x-flipbox element with which I quickly was able to construct a basic navigation behavior for my application in a declarative way.
<x-slides>
<x-slide>
<x-map id="map" data-key="xxx"></x-map>
</x-slide>
<x-slide>
<x-flipbox class=" x-flip-direction-right">
<x-card>
<div>Front side</div>
<div>Back side</div>
</x-card>
</x-flipbox>
</x-slide>
</x-slides>
<x-slide>
<x-map id="map" data-key="xxx"></x-map>
</x-slide>
<x-slide>
<x-flipbox class=" x-flip-direction-right">
<x-card>
<div>Front side</div>
<div>Back side</div>
</x-card>
</x-flipbox>
</x-slide>
</x-slides>
Here again we have to include the JavaScript and CSS files in the header or at the end of the document:
<link rel="stylesheet" type="text/css" href="/x-tags/map/map.css"/>
<link rel="stylesheet" type="text/css" href="/x-tags/slidebox/slidebox.css"/>
<link rel="stylesheet" type="text/css" href="/x-tags/flipbox/flipbox.css"/>
<script src="/x-tags/x-tag.js"> </script>
<script src="/x-tags/slidebox/slidebox.js"> </script>
<script src="/x-tags/map/map.js"> </script>
<script src="/x-tags/flipbox/flipbox.js"> </script>
<link rel="stylesheet" type="text/css" href="/x-tags/slidebox/slidebox.css"/>
<link rel="stylesheet" type="text/css" href="/x-tags/flipbox/flipbox.css"/>
<script src="/x-tags/x-tag.js"> </script>
<script src="/x-tags/slidebox/slidebox.js"> </script>
<script src="/x-tags/map/map.js"> </script>
<script src="/x-tags/flipbox/flipbox.js"> </script>
All in all x-tags or better custom elements are a promising feature of HTML5 to make development of large applications and library integration more convenient. Thanks to JavaScript polyfills, it can be used much earlier than before all browser support it natively. I'm quite sure JavaScript libraries will jump on that train once available because it is easy to do and it offers a nice way to integrate third-party behavior in a declarative and semantic way.
See a short slide deck about Mozillas x-tag polyfill or jump to the demo page.
