"Custom Elements” é uma especificação de componente web que define como criar e usar novos tipos de elementos DOM. Existem algumas regras básicas sobre como nomear e definir seus elementos personalizados. Eles são:
- O nome do seu elemento personalizado deve conter um dash (-) . Por exemplo,
<file-reader>
e <skype-login>
são nomes válidos para elementos personalizados, enquanto <skype_login>
e <skypelogin>
não são. Isso é necessário para permitir que o analisador HTML diferencia um elemento personalizado e um elemento HTML incorporado.
- Um elemento personalizado não pode ser registrado mais de uma vez. Um
DOMException
erro será lançado se você fizer isso.
- Um elemento personalizado não pode ser auto-fechado. Por exemplo, você não pode escrever um elemento personalizado como este:
<skype-login />
.Ele sempre deve ser escrito assim: <skype-login></skype-login>
.
Um elemento personalizado pode ser criado usando o customElements.define()
método da API do navegador e uma classe que se estende HTMLElement
em JavaScript, assim:
class ErickPrates extends HTMLElement {
// Definir comportamento aqui
}
window.customElements.define('Erick-Prates', ErickPrates);
Outra opção é usar uma classe anônima assim:
window.customElements.define('Erick-Prates', class extends HTMLElement {
// Definir comportamento aqui
});
Com isso já definido, agora você pode usar o elemento personalizado em uma página da Web, assim:
<Erick-Prates></Erick-Prates>
Você pode definir propriedades em um CustomElement. Por exemplo, vamos adicionar um atributo chamado open
e ao nosso <Erick-Prates>
elemento. Isso pode ser alcançado assim:
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");
}
}
isso se refere ao próprio elemento DOM. Então, neste exemplo, isso se refere <Erick-Prates>
.
Depois de ter feito isso, agora você pode usar o elemento personalizado em seu navegador como este:
<Erick-Prates open="true"></Erick-Prates>
Você também pode definir um construtor na classe, mas você deve chamar o super()
método antes de adicionar qualquer outro código.
Existem ganchos do ciclo de vida que os elementos personalizados podem definir durante sua existência. Esses ganchos são:
- construtor (): Aqui, você pode anexar ouvintes de eventos e inicializar o estado.
- connectedCallback (): Chamado sempre que o elemento personalizado é inserido no DOM.
- desconectadoCallback (): Chamado sempre que o elemento personalizado é removido do DOM.
- attributeChangedCallback (attrName, oldVal, newVal): Chamado sempre que um atributo é adicionado, removido ou atualizado. Apenas os atributos listados na propriedade observadaAttributes são afetados.
- adoptadoCallback (): Chamado sempre que o elemento personalizado foi movido para um novo documento.
Você pode fazer referência à especificação de elemento personalizado para obter mais informações.