The Tag module provides a way to hook into Node creation and insertion. This allows you to build simple to use and powerful components that behave more like standard DOM nodes.

{{>getting-started}}

Using Tag

To hook into Node creation you must first specify what kind of node to hook into and what should be done on creation. You do that by registering a CSS selector and a mixin. If a node is found to match the selector, the mixin is applied and its `initializer` method is called.

When using Tag, every Node has a `tag` plugin. A CSS selector can be registered so that when any Node is found to match it has a mixin applied When a node is first created using Y.Node, the Tag plugin

CSS Selectors are used to attach additional functionality (mixins) to Nodes. Nodes will be matched whether they are present on page load or created dynamically.

Registering Tags

``` // Tag selector matches all copyright tags Y.Tag.register('copyright', { created: function(config) { this.addAttr('name', {value: config.name}) this.get('host').setHTML('Copyright © ' + (new Date().getFullYear()) + ' ' + this.get('name')); } }); ```

When registering a tag, `data-` attributes are passed in as config parameters. Dashes are used for camelization (i.e. `data-full-name` would be passed as `config.fullName`).

``` ```

Every Node has a `tag` plugin already created. The plugin is the receiver of a registered mixin.

``` Y.one('copyright').tag.get('name'); // Foo Inc. ```

Registering Attributes

Registering attributes is a way to provide more graceful degredation to your elements. You could also register both an attribute and a tag to provide more flexible usage.

``` // Attribute selector matches all highlight attributes Y.Tag.register('[highdpi]', { created: function(config) { if (Y.config.win.devicePixelRatio <= 1) {return;} var host = config.get('host'), src = host.get('src').replace(/(\.[a-zA-Z]+)$/, function(m) {return '@2x' + m;}); if (src) { Y.io(src, { method: 'HEAD', onsuccess: function(e) { host.set('src', src); } }); } } }); Y.Tag.register('example, [example]', {}); ```

When registering an attribute, the attribute name becomes a namespace for config parameters.

``` // Attribute selector matches all highlight attributes Y.Tag.register('[highlight]', { created: function(config) { var host = config.get('host'), text = host.getHTML().replace(config.word, '' + config.word + ''); host.setHTML(text); } }); ``` ```

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

```

Inserted Event

`tag:inserted`

How It Works

`gallery-event-inserted` provides the magic behind the `tag:inserted` event. It uses CSS3 Animation to create efficient inserted events. If CSS3 Animation is unsupported it falls back to using the slower DOMNodeInserted mutation event.

Registry

Name Description Module
`ybind` Allows a node to respond to events. tag-ybind

About

X-Tag was the initial inspiration, however the Tag module goes beyond the current implementation and allows you to register attributes in addition to tags.

Compatibility: IE9+, FF5+, Chrome 4+, Safari/iOS 4+, Android 2.1+