What is the "customElements" property for?

Asked

Viewed 152 times

1

javascript

2 answers

4


Translating in a very simple way, customElements means custom elements. That means you can create your own element, just as you can use the elements <a> <br> <div>.

In order to use this property, the browser needs to implement the specification Custom Elements v1. It also specifies the rules developers need to follow to implement their custom elements.

To begin to understand its use, I suggest using the google tutorials, is much easier to understand than the specification.

For example:

class WmSouza extends HTMLElement {
  connectedCallback() {
    this.appendChild(document.createTextNode(" especial para wmsouza"));
  }
}
window.customElements.define('wm-souza', WmSouza);
<wm-souza>teste</wm-souza>

  • I had the same problem and it worked for me. Thanks! :)

2

"Custom Elements" is a web component specification that defines how to create and use new types of DOM elements. There are some basic rules on how to name and define your custom elements. They are:

  • The name of your custom widget must contain a Dash (-) . For example,<file-reader> and <skype-login> are valid names for custom elements, while <skype_login> and <skypelogin> are not. This is necessary to allow the HTML parser to differentiate between a custom element and an embedded HTML element.
  • A custom element cannot be registered more than once. A DOMException error will be released if you do this.
  • A custom element cannot be auto-closed. For example, you cannot write a custom element like this: <skype-login />.It should always be written like this: <skype-login></skype-login>.

A custom element can be created using customElements.define() browser API method and a class that extends HTMLElement in Javascript, like this: 

class ErickPrates extends HTMLElement {
  // Definir comportamento aqui
}

window.customElements.define('Erick-Prates', ErickPrates);

Another option is to use an anonymous class like this:

window.customElements.define('Erick-Prates', class extends HTMLElement {
  // Definir comportamento aqui
});

With this already set, you can now use the custom element on a web page, thus:

<Erick-Prates></Erick-Prates>

You can define properties in a Customelement. For example, let’s add an attribute called open and to our <Erick-Prates> element. This can be achieved thus:

class ErickPrates extends HTMLElement {
  // Defina a propriedade "open"
  set open(option) {
    this.setAttribute("open", option);
  }

  // Obter a propriedade "open"
  get open() {
    return this.hasAttribute("open");
  }

}

this refers to the DOM element itself. So, in this example, this refers to <Erick-Prates>.

Once you have done this, you can now use the custom element in your browser like this:

<Erick-Prates open="true"></Erick-Prates>

You can also set a constructor in the class, but you should call the super() method before adding any other code.

There are life cycle hooks that custom elements can define during their existence. These hooks are:

  • builder (): Here, you can attach event listeners and initialize the status.
  • connectedCallback (): Called whenever the custom element is inserted into the DOM.
  • disconnected (): Called whenever the custom element is removed from the DOM.
  • attributeChangedCallback (attrName, oldVal, newVal): Called whenever an attribute is added, removed or updated. Only attributes listed in the property observadaAttributes are affected.
  • adopted (): Called whenever the custom element has been moved to a new document.

You can make reference to custom element specification for more information.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.