Extending HTML by Creating Custom Tags

In this tutorial, I will show you how easy it is to extend the HTML language with custom tags. The custom tags can be used to implement various behaviors, so they are a very convenient way to write less code and keep your HTML documents simpler.

To go further with custom tags, check out my post on creating encapsulated custom tags with the Shadow DOM.

What Is a Custom HTML Tag?

With HTML, you use the . This custom tag will display the Gravatar picture for a certain email address. 

The window.customElements.define().

The very first argument in are invalid. This allows the parser should be able to differentiate a regular element from a custom tag. 

Custom element tag names must always have a dash (-).

Step 2: Choose the Right Prototype

HTMLElement. The above piece of code is equivalent to the following:

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

If you wish to create a custom element, that extends another HTML element, the native element has to be extended in DOMException.

Custom element tags cannot be self-closing.

4. Instantiating the Custom Element

All standard rules of HTML elements apply to custom elements. Just like standard elements, you can create a custom element in the DOM using JavaScript, or declare it in HTML.

Declaring custom elements in HTML:

<codingdude-gravatar></codingdude-gravatar><br>

Creating a custom element in the DOM using JavaScript:

var codingdudeGravatar = document.createElement('codingdude-gravatar');<br>codingdudeGravatar.addEventListener('click',function(e){});<br>

Instantiating type extension elements in HTML:

<button is="codingdude-gravatar"><br>

Creating a type extension element in DOM using JavaScript:

var codingdudeGravatar = document.createElement('button', 'codingdude-gravatar');<br>

5. Adding Markup to the Custom Tag

Adding markup is rather simple in a custom tag. To begin with, you need to create a class that extends a parent HTML element. In our case, we are going to extend HTMLElement, we'll make use of the innerText of the custom tag. Remember to call this inside the constructor points to the custom element that gets created.

Here is a simple overview of how our component would look.

class CodingDudeGravatar extends HTMLElement {<br>  constructor() {<br>    super()<br>    this.addEventListener('click', e => {<br>        alert('You Clicked Me!')<br>    });<br>    this.innerText="Hello There!"<br>  }<br>}<br>window.customElements.define('codingdude-gravatar', CodingDudeGravatar);<br>

6. LifeCycle Methods

Before you start adding markup to the custom tag, you need to be aware of the lifecycle methods associated with custom tags. There are four lifecycle callbacks.

class CodingDudeGravatar extends HTMLElement {<br>    constructor() {<br>    super(); // always call super() first in the constructor.<br>    ...<br>    }<br>    connectedCallback() {<br>    ...<br>    }<br>    disconnectedCallback() {<br>    ...<br>    }<br>    attributeChangedCallback(attrName, oldVal, newVal) {<br>    ...<br>    }<br>}<br>

We have already seen how to use the connectedCallback.

connectedCallback can be used to check for the email attribute in our custom tag. As soon as the element gets added to the document, this check will take place. We would make use of a custom tag has the email attribute is set in the custom tag, the screen would be as follows:

customElements.define("codingdude-gravatar", CodingDudeGravatar);<br>

attributeChangedCallback for all attributes listed in the attributeChangedCallback to be fired. In our case, we would want the el.setAttribute('email','newemail') on the custom element, the browser will trigger disconnectedCallback

Last in our list of lifecycle methods would be the el.remove() method.

However, you must be very careful about how hidden is a property that can be used to hide an element, e.g. HTMLElement, these properties will be present in the custom element by default. However, the behaviour of these properties can be modified. Most of the time, the getters and setters in JavaScript classes are used to control the properties. 

<codingdude-gravatar></codingdude-gravatar><br>

Demo

Everything discussed in this post can be experimented with in the following demo.

Conclusion

Hooray! We have come to the end of our post on how to create custom elements. Now, you should be able to create a custom element and use it in your HTML markup. Do give it a try! You will be astonished to see how much can be accomplished.

This is just the beginning of how custom elements work. There is so much more to explore and learn in this area. Keep watching this space for more posts on custom elements and their advanced concepts.

The above is the detailed content of Extending HTML by Creating Custom Tags. For more information, please follow other related articles on the PHP Chinese website!