Pense nisso como um sistema de navegação estelar que permite integrar módulos e componentes desconhecidos de outras frotas, permitindo uma maior flexibilidade e interoperabilidade.

On julho 14, 2024

Esquemas de Elementos Personalizados (Custom Element Schemas)

Por padrão, o Angular lança um erro quando encontra um elemento HTML desconhecido. Você pode desativar esse comportamento incluindo CUSTOM_ELEMENTS_SCHEMA na propriedade schemas dos metadados do componente.

Pense nisso como um sistema de navegação estelar que permite integrar módulos e componentes desconhecidos de outras frotas, permitindo uma maior flexibilidade e interoperabilidade.

O Desafio dos Elementos Desconhecidos

Por padrão, o Angular é rigoroso com a sintaxe dos templates. Se ele encontrar um elemento HTML que não reconhece, como <meu-componente-personalizado>, ele irá gerar um erro, pois não sabe como lidar com essa tecnologia desconhecida.

A Solução: `CUSTOM_ELEMENTS_SCHEMA`

O CUSTOM_ELEMENTS_SCHEMA é como um tradutor universal que permite ao Angular entender e interpretar elementos personalizados.
Ao adicionar esse esquema ao seu módulo, você está dizendo ao Angular:
“Ei, relaxa! Eu sei o que estou fazendo. Confie em mim, esses elementos personalizados são legítimos.”

Protocolos de Comunicação Intergaláctica: Entendendo o `CUSTOM_ELEMENTS_SCHEMA`

Imagine que sua nave estelar encontra uma raça alienígena com uma tecnologia de comunicação completamente diferente. Para estabelecer contato, você precisa adaptar seus sistemas para entender os sinais deles. O CUSTOM_ELEMENTS_SCHEMA em Angular funciona de forma semelhante, permitindo que você utilize elementos HTML personalizados (como Web Components) em seus templates.

Exemplo: Integrando um Web Component

Vamos supor que você encontrou um Web Component chamado <contador-alienigena> que exibeum contador com números alienígenas. Para usá-lo em seu componente Angular, você precisa importar o CUSTOM_ELEMENTS_SCHEMA e adicioná-lo ao array schemas do decorator @Component:

Primeiro, definimos um custom element chamado `ContadorAlienigena`.

// contador-alienigena.js
class ContadorAlienigena extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.count = 0;
        this.render();
    }

    connectedCallback() {
        this.addEventListener('click', this.increment.bind(this));
    }

    disconnectedCallback() {
        this.removeEventListener('click', this.increment.bind(this));
    }

    increment() {
        this.count++;
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
          padding: 10px;
          background: #AD23F3;
          color: #ffffff;
          font-size: 20px;
          cursor: pointer;
        }
      </style>
      <div>Clique para contar: ${this.count}</div>
    `;
    }
}
customElements.define('contador-alienigena', ContadorAlienigena);

Passo 2: Importar o Custom Element no HTML Principal

<body>
  <app-root></app-root>
  <script src="assets/js/contador-alienigena.js"></script>
</body>

Agora, vamos criar um componente Angular que utiliza o custom element `ContadorAlienigena`.

import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

@Component({
  selector: 'custom-elements',
  standalone: true,
  imports: [],
  template: '<contador-alienigena></contador-alienigena>',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  styles: ``
})
export class AppCustomElementsComponent {

}

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {AppCustomElementsComponent} from "./components/app-custom-elements/app-custom-elements.component";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AppCustomElementsComponent],
  template: `
    <h1>Welcome to {{title}}!</h1>
    <custom-elements></custom-elements>
  `,
  styles: [],
})
export class AppComponent {
  title = 'advanced-comp-conf';
}

Criação do Custom Element: Definimos a classe ContadorAlienigena que estende HTMLElement. Este elemento conta cliques e exibe o valor.
Importação do Script: Incluímos o script contador-alienigena.js no arquivo index.html para garantir que o custom element esteja disponível para uso no Angular.
Uso no Componente Angular: Criamos o componente CustomElementsComponent que utiliza o custom element <contador-alienigena>.
Configuração do Módulo: Configuramos o módulo Angular (AppModule) para reconhecer elementos personalizados através do CUSTOM_ELEMENTS_SCHEMA.

Como Funciona?

Ao adicionar o CUSTOM_ELEMENTS_SCHEMA, o Angular não tentará validar o elemento <contador-alienigena>. Ele simplesmente o deixará passar, permitindo que o navegador o interprete e o renderize corretamente.

Precauções

É importante usar o CUSTOM_ELEMENTS_SCHEMA com cuidado. Ele desativa a validação de elementos, o que pode levar a erros se você usar elementos personalizados incorretamente ou se eles tiverem conflitos com outros elementos do seu projeto.

Conclusão

No universo Angular, CUSTOM_ELEMENTS_SCHEMA é o seu passe para explorar novos mundos de componentes personalizados. Com este protocolo, você pode integrar elementos não nativos sem medo de erros, permitindo que sua aplicação Angular se torne uma nave-mãe verdadeiramente intergaláctica.

Lembre-se, em qualquer missão espacial, a chave para o sucesso é a preparação e a compreensão das ferramentas à sua disposição. Com o CUSTOM_ELEMENTS_SCHEMA, você está bem equipado para enfrentar qualquer desafio que encontrar na vastidão do cosmos Angular.

📚 Gostou dos exemplos? Quer ver mais? Visite nosso repositório no GitHub para explorar todos os códigos em detalhes e contribuir com suas ideias.

Repositório no GitHub