X-Tag - The Custom Elements Polylib
X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers.
X-Tag allows you to easily create elements to encapsulate common behavior or use existing custom elements to quickly get the behavior you're looking for. For example, check out Brick, which contains 14 custom elements optimized for Web Applications.
Creating custom elements has never been easier. X-Tag provides several powerful features that streamline element creation such as: Custom events and delegation, mixins, accessors, component lifecycle functions, pseudos and more.
X-Tag is built upon W3C Web Component polyfills provided by the Polymer project. We use Custom Element, HTMLImports, and Mutation Observers. We also included a few other polyfills to ensure IE 9 compatibility.
X-Tag Custom Elements
X-Tag Core Library
Web Components Polyfills
-
A panel is a block element that has the ability to load data asynchronously when a src attribute is set (same-origin policy restricted).
Click to set this panel element's srcattribute, it will fetch the specified content asynchronously.<x-panel src="/elements/demo/panel-content.html"></x-panel> -
The modal element provides an simple, structural tag that for showing modaled content that auto-centers in response to dynamic changes to screen and content size.
<x-modal> <h3>Modal 2 Demo</h3> <p>Hello, I'm an auto-magical modal, how do you do?</p> </x-modal> -
Leaflet maps is a popular, open alternative to Google maps that has caught fire in the developer community. This custom map tag allows you to easily create live map elements declaratively.
<x-map data-key="6c86bb5b30a442c180772d978f3ae000"></x-map>
X-Tag is compatible with the following browser versions:
Firefox 5+ 
Chrome 4+, Android 2.1+
Safari 4+ 
Internet Explorer 9+
Opera 11+ Modal Demo
Hello, I'm an auto-magical modal, how do you do?