Reactive X-Tags

2014-04-14 00:00:00 +0100 by Alex R. Young

Reactive Elements

Here's a cool idea I haven't seen before: ReactiveElements with X-Tag. X-Tag is a library from Mozilla that uses JavaScript to provide support for the current W3 Web Components draft. This basically allows modern browsers to use custom elements:

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.

X-Tag provides several powerful features that streamline element creation such as: Custom events and delegation, mixins, accessors, component lifecycle functions, pseudos and more.

The PixelsCommander / ReactiveElements project by Denis Radin is a small MIT licensed library that builds on X-Tag so you can use it with React.js.

First you create a React component definition:

MyComponent = React.createClass({
  render: function() {
    return <ul><li>React content</li></ul>;

xtag.registerReact('my-react-component', MyComponent);

And then you can use my-react-component in your HTML and see items if it has been specified as an attribute.

I like the idea of combining these two libraries, it has an AngularJS feel while embracing upcoming standards.