?????, ??? ???! ??? ?? ??? ??? ? ??? ????? ?? ??? ?? ????? Jedi? ????? ?? ?? ??? customElements.define() ? customElements.get()? ??? ?? ??? ??? ????!

?? customElements.define(): ??? ??? ???... ? ??, Element!

??? ?? ????? ????? ???? HTML ???? ??? ??? ??? ???. ??? ?? customElements.define()? ???? ????. ? Mewtwo ???? ????? ? ??????!

class ElementoTopzera extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `<p>Eu sou incrível e customizado!</p>`;
  }
}

customElements.define('elemento-topzera', ElementoTopzera);

?? ??? ?? HTML? ?? ??? ??? ? ????.

<elemento-topzera></elemento-topzera>

?! ? ?? DOM? ??? ???????!

??♂? ??? ????? ?? ??? ? ? ?? ??? ?

1. ??? ?? ?? ??? ?? ??? ??? ???. ???? ?? ???? ???? ???? ????!

class BotaoContador extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.innerHTML = `
      <button>Cliques: <span>0</span></button>
    `;
    this.addEventListener('click', () => {
      this.count++;
      this.querySelector('span').textContent = this.count;
    });
  }
}

customElements.define('botao-contador', BotaoContador);

1. ??? ?? RPG ????? ? ?????? ??? ??? ??!

class CardPerfil extends HTMLElement {
  constructor() {
    super();
    const nome = this.getAttribute('nome') || 'Dev An?nimo';
    const skill = this.getAttribute('skill') || 'Café++';

    this.innerHTML = `
      <div style="border: 2px solid #333; padding: 10px; margin: 10px;">
        <h2>${nome}</h2>
        <p>Skill Suprema: ${skill}</p>
      </div>
    `;
  }
}

customElements.define('card-perfil', CardPerfil);

??? ?????.

<card-perfil nome="ZézimDev" skill="Bug Hunter"></card-perfil>

???♂? customElements.get(): ??? ?? ??

?? ?? ??? ?? ????? ???? ??? ??? ?? ???? ??? ?? ? ???? ??? ????? customElements.get()? ???? ????!

const ElementoTopzera = customElements.get('elemento-topzera');

if (ElementoTopzera) {
  console.log('Elemento encontrado! Hora do show!');
  // Faz alguma mágica aqui
} else {
  console.log('404 Elemento Not Found');
}

?? 80?? ?????? ?? ?? ??

1. ???? ?? ?? ??? ?? ?? ??? ???? ?????? ????? ??? ????? ????? ?? ??? ? ?? ???? ??? ? ????.

function carregaComponenteSeNecessario(nomeElemento) {
  if (!customElements.get(nomeElemento)) {
    import(`./components/${nomeElemento}.js`)
      .then(() => console.log(`${nomeElemento} carregado e pronto pra a??o!`))
      .catch(err => console.error(`Oops, deu ruim ao carregar ${nomeElemento}`, err));
  }
}

carregaComponenteSeNecessario('super-tabela');

1. ???? ?? ??? ??? ??? ????? ???? ?? ??? ??????.

function elementoSeguro(nomeElemento) {
  const elemento = customElements.get(nomeElemento);
  if (elemento && elemento.prototype instanceof HTMLElement) {
    console.log('Elemento verificado e aprovado! ?');
    return true;
  }
  console.warn('Elemento suspeito detectado! ?');
  return false;
}

elementoSeguro('botao-contador'); // true, se definido anteriormente
elementoSeguro('virus-malicioso'); // false, espero eu! ?

? ????? ??? ??????? ??

1. ??? ??: ?? ???? ??? ??? ?? ?? ??? ?????. ??? ??? ?? ?????!
2. ?? ??: DOM? ???? ???? ??? ???? ?? ?? customElements.get()? ?????.
3. ???? ?????: ?? ???? ?????? ?? ?? ??:

   class SuperButton extends HTMLButtonElement {
     // Código supimpa aqui
   }
   customElements.define('super-button', SuperButton, { extends: 'button' });

? ??? ??? ?????!

customElements.define() ? customElements.get()? ???? ???? ???? ? ???? ?? ?? ? ????! ?????: ? ??? ??? ?? ??? ?? ? ?? ? ??? ????!

?? ???? ?????! ??? ??? ?? ??? ?????! ??? ??? ???? ???? ?? "??? ????? ??? ????"?? ??????. ??

? ??? ???? ? ?? ???? ?????? MDN? ?? Custom Elements ??? ?????. ????? ???? ???? ????! ??

?????, ????? ???? ??? ??? ???? ?? ?? ??? ?? ??? ??? ??????! ??? ????? ??? ??? ??? ?! ?

??? ??? ????! ????

? ??? ??? ?? ?? ??: Dominando customElements.define() ? .get() como um Jedi do Front-end!? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!