Custom html tags code#

You can also try adding an id attribute, selecting the element using a method of your choice, and calling the getId() method on it. You can select your custom element from Javascript just like you would do with any other element using document.querySelector(),ĭocument.querySelectorAll(), document.getElementById(), etc. You can also define custom methods as below: // Creating my own custom HTML elementĪbove, we created a method on the element named getId() that will return the id of the element. With these additions, your class will look like: // Creating my own custom HTML element You will also have to add a super() function in order to make sure you are inheriting all HTMlElement methods, attributes, and properties. It is good practice to add a constructor to your element class. You have now created your own custom HTML element. This also permits us to add our own event listeners, functions, and behaviors.

We will then create a class in order to have a custom element with our own properties and attributes.

the element name (should be the exact same as the one used in the HTML code).

The browser exposes a function called fine, which permits an element that can be reused to be defined. Now, we need to define our element to make the browser aware that we are creating a new element that will be reused.Īfter the class, add the following line of code: fine('hello-world', HelloWorld)

Custom html tags code#

We are done with the HTML code now, it’s time to write some Javascript.Ĭreate a class named HelloWorld that extends HTMLElement. You can add any text between your element tags. Now, add your element into the HTML code, between the body tags above the script tag. I will name it hello-world, a pretty simple name ). Now that we have our basic HTML code, let’s get a name for our element. We are going to start with the usual HTML boilerplate like below : Open that folder and create three files named index.html, style.css and main.js.

To get started, create a new folder to contain the code from this tutorial. At the end of this tutorial, you will be able to create your own basic HTML element. What will typically happen with your elements is that they get compiled down into some Javascript, which takes care of the DOM.īut what about actually creating an HTML element? That is what we are going to learn in this post. Have you ever thought about creating your own HTML element? If you’ve used a frontend framework like React, Vue, or Angular, you might have been amazed that you can create any component and reuse it throughout your app.