$.component()

How does it work?

Custom Elements is a capability for creating your own custom HTML elements. They can have their own scripted behavior and CSS styling. They are a part of web components, but can also be used by themselves.

As you'll understand, using the $.component() function, we'll be able to have elements like that in our DOM:

<hello-element name="Jane"></hello-element><br>
<hello-element name="Arthur"></hello-element><br>
<hello-element name="World 🌎"></hello-element>

How to use it?

This function will only take 2 arguments:

• name - the name of your custom HTML element. ⚠️ Custom elements needs a - in their name.
• callback - The operation you'll apply to each element.

Example

HTML:

<hello-element name="Jane"></hello-element><br>
<hello-element name="Arthur"></hello-element><br>
<hello-element name="World 🌎"></hello-element>

JS:

$.component("hello-element", function(el) {
  $.html($.s(el), `Hello ${el.getAttribute("name")}`)
})