<x>

Tweet

Custom HTML elements for modern browsers.

Intro

What it Does

When you need an advanced HTML element for your app - like a tabbox, tree, special input, etc. - you're probably familiar with this process:

  1. scour the web for a plugin
  2. add the plugin script include to your page
  3. copy an element, or block of elements, into your markup
  4. create a script block or include for your own code
  5. write JavaScript to select elements on page load
  6. instantiate a script to augment the existing vanilla markup
  7. wash, rinse, repeat for every plugin you need

But what if all you had to do was:

  1. Define your own HTML tag
  2. Use it as you would any native tag
  3. There is no step 3, it all Just Works™

Welcome to X-Tag folks.

How it Works

In order to allow for the recognition and parsing of custom HTML tags, X-Tag utilizes a special CSS event mechanism to listen for the creation/parsing of new custom elements (details here). This event is fired and processed by X-Tag regardless of whether the element is present in the source of the document, added by setting innerHTML, or generated dynamically using document.createElement. When the element is initially created, X-Tag inflates it and calls the onCreate lifecycle function. X-Tag also provides an onInsert lifecycle function that is run each time the element is injected into the DOM. Here's an example with some comments for a bit more clarity: 


xtag.register('accordion', {
	onCreate: function(){
		// fired once at the time a component 
		// is initially created or parsed
	},
	onInsert: function(){
		// fired each time a component 
		// is inserted into the DOM
	},
	events: {
		'click:delegate(x-toggler)': function(){
			// activate a clicked toggler
		}
	},
	getters: {
		'togglers': function(){
			// return all toggler children
		}
	},
	setters: {
		// Add DOM object setters
	},
	methods: {
		nextToggler: function(){
			// activate next toggler
		},
		previousToggler: function(){
			// activate the previous toggler
		}
	}
});
Browser Support
X-Tag is compatible with the following browser versions:
Pushing the Standard

X-Tag is based on the Custom Elements portion of the W3 Web Components spec. As document.register is solidified and implemented (Firefox and Chrome are working on it) X-Tag will begin to take advantage of the native method internally and introduce a global document method to polyfill X-Tag-capable browsers.

Docs

Custom Tag Registration

contentstring

The content property on the tag registration object allows you to declare default innerHTML for your component, similar to Shadow DOM elements in highlighted in the W3 Web Components draft. 


xtag.register('superinput', {
	content: ''
});

onCreatefunction

Whenever a tag is recognized and parsed on load or generated using document.createElement, an onCreate function is called allowing you to modify the element before any other code is applied to it. 


xtag.register('superinput', {
	onCreate: function(){
		// superinputs begin life knowing they're super.
		this.value = 'super';
	}
});

onInsertfunction

The onInsert method is called everytime a given component's DOM element is added to the DOM. This allows you to do things like check the state or structure of the surrounding DOM tree or window scope and modify your component accordingly. 


xtag.register('superinput', {
	onInsert: function(){
		// superinputs announce their arrival in the DOM like a boss!
		alert("Yeah, that's right, superinput comin' thro'!");
	}
});

gettersobject

The getter object provides native value retrieval handlers to your component. For example: if a user caches a component's value, var value = element.value; your getter would have the oppertunity to fetch that value from anywhere you'd like and even modify it before returning. 


xtag.register('superinput', {
	getters: {
		value: function(){
			// everything superinputs do has a little super mixed in ;)
			return this.value + '  is super';
		}
	}
});

settersobject

The setters object is a shortcut for easy attachements of JavaSript accessors to the DOM element of your component. For instance, when an user writes the code element.src = "http://somesrc.com" your setter would be called with the provided string value giving you a chance to manipulate the string or change properties on the element. 


xtag.register('superinput', {
	setters: {
		value: function(value){
			// boy, these superinputs sure are loud little buggers.
			alert(value);
			this.value = value;
		}
	}
});

eventsobject

The events object allows you to bind events to the component at the time of creation. Pseudo events like delegation are supported, additional pseudos can be added to the pseudos object on the global xtag variable. 


xtag.register('superinput', {
	events: {
		focus: function(){
			// what should superinputs do when they're in the spotlight?
		}
	}
});

mixinsarray

The mixins array allows you specify mixin keys that map to collections of getters, setters, events, and lifecycle functions. X-Tag merges mixins into your component definition object for you. Mixins are found on the mixins object of the global xtag variable - you can add your own mixins there too! 


xtag.register('superinput', {
	mixins: ['superdefaults']
});

Examples

Supported Components

We've created a few examples that demonstrate the kinds of components you can create. Check out our Accordion, Tabbox or Flipbox components.

Community-driven Components

We're working on a simple system developers can use to submit and share components (think NPM), check back soon!