How to create custom tags for HTML [closed]

Question

How can I create custom tags for HTML, with special attributes and behavior?

Answer 1

Depending on what you mean by "special attributes and behavior," you can "create" custom HTML tags right now. The following shows up in all browsers, and even works with the various JavaScript methods:

<my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>

There are just a couple of things you have to keep in mind:

0. Hyphenation! Custom elements should consist of at least one - like my-book or app-menu or header-title, etc. Just, don't use data-* since it's reserved for data- attributes.

1. All custom elements have a display of inline by default. You can change that with CSS or JavaScript, however.

2. Internet Explorer does not recognize any of these elements unless you first "create" them with JavaScript:

    document.createElement('my-book');
   

So you have to do that before you can use them in your CSS, HTML, or JavaScript.

Answer 2

All you really have to do is define CSS content for that tag.

Example:

mytag {
    font-weight: bold;
}

And now the mytag is your own bold:

<mytag>This text is in bold</mytag>

Answer 3

There is now an emerging W3C standard specification, called Web Component Custom Elements, that enables developers to create their own custom HTML elements and register them with the browser parser.

Mozilla has developed a library, named X-Tag, that makes the process of creating and working with custom elements super easy, check it out: X-Tags.org

Answer 4

There is also a version which is only supported in Chrome 54 and Opera.

Example:

class BasicElement extends HTMLElement {
    connectedCallback() {
        this.textContent = 'Just a basic custom element.';
    }
}
customElements.define('basic-element', BasicElement);

You can learn more about this here.

Answer 5

You can create custom HTML tags with following steps:

Step 1 - Register a new element. Custom elements are created using document.registerElement():

var XFoo = document.registerElement('x-foo', {
    prototype: Object.create(HTMLElement.prototype)
});

The second argument in registerElement is optional object which describes the element's prototype.

Step 2 - Instantiating custom tags

There are several ways to do so:

Declare them:

<x-foo></x-foo>

Create DOM in JavaScript:

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
    alert('Thanks!');
});

Use the new operator:

var xFoo = new XFoo();

Step 3 - Attach the newly created element with document

document.body.appendChild(new XFoo());

Complete example:

var XFooProto = Object.create(HTMLElement.prototype);

// 1. Give x-foo a foo() method.
XFooProto.foo = function() {
  alert('foo() called');
};

// 2. Define a property read-only "bar".
Object.defineProperty(XFooProto, "bar", {value: 5});

// 3. Register x-foo's definition.
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});

// 4. Instantiate an x-foo.
var xfoo = document.createElement('x-foo');

// 5. Add it to the page.
document.body.appendChild(xfoo);