X-Tag - The Custom Elements Polylib

What is X-Tag?

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 Technology Stack

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

Panel Map Flipbox Etc

X-Tag Core Library

Accessors Pseudos Mixins Events Utils

Web Components Polyfills

Custom Element HTMLImports
Razzle-Dazzle

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 src attribute, it will fetch the specified content asynchronously.
<x-panel src="/elements/demo/panel-content.html"></x-panel>

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>