Navigating here in SOpt found the following question: How to add customElements support for Opera 12 ? , and would like to know how useful this property is.
Note that by doing a simple search here, to date there is only this question quoted.
Why do I have to "customElements" property?
1
asked by anonymous 24.01.2018 / 22:51
2 answers
4
Simply put, customElements means custom elements . This means that you can create your own element, just as you can use <a> <br> <div> elements.
In order to use this property, the browser needs to implement the Custom Elements v1 specification. It also specifies the rules that developers need to follow to implement their custom elements.
To start understanding your usage, I suggest using the Google tutorials , much easier to understand than the specification.
For example:
class WmSouza extends HTMLElement {
connectedCallback() {
this.appendChild(document.createTextNode(" especial para wmsouza
29.01.2018 / 03:21
2
"Custom Elements" is a web component specification that defines how to create and use new DOM element types.There are some basic rules about how to name and define your custom elements.These are:
- The name of your custom element should contain a dash (-). For example,
<file-reader>and<skype-login>are valid names for custom elements, while<skype_login>and<skypelogin>are not valid names. This is required to allow the HTML parser to differentiate a custom element and an embedded HTML element. - A custom element can not be registered more than once. A
DOMExceptionerror will be thrown if you do this. - A custom element can not be auto-closed. For example, you can not 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 the customElements.define() method of the browser API 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 defined, you can now use the custom element on a web page, like this:
<Erick-Prates></Erick-Prates> You can set properties in a CustomElement. For example, we'll add an attribute called open and our <Erick-Prates> element. This can be achieved like this:
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 define a constructor in the class, but you should call the super() method before adding any other code.
There are lifecycle hooks that custom elements can define during their lifetime. These hooks are:
- constructor () : Here, you can attach event listeners and initialize the state.
- connectedCallback () : Called whenever the custom element is inserted into the DOM.
- DisconnectedCallback () : Called whenever the custom element is removed from the DOM.
- attributeChangedCallback (attrName, oldVal, newVal) : Called whenever an attribute is added, removed, or updated. Only the attributes listed in the observedAttributes property are affected.
- adoptedCallback () : Called whenever the custom element has been moved to a new document.
You can reference the custom element specification for more information.
31.01.2018 / 20:20