Bootcamp Java+Angular: Dica Angular para Criação de Classes

#Angular

Durante o primeiro curso do bootcamp Santander em que estudamos Angular, me deparei com um problema. Ao criar a classe abaixo e referenciar o script da classe no meu HTML, fazendo igual o que era explicado na aula para ter uma tag com conteúdo dinâmico (PROP titulo dentro da TAG titulo-dinamico), o texto digitado no PROP não estava sendo exibido:

class TituloDinamico extends HTMLElement {
  constructor() {
      super();

      const shadow = this.attachShadow({ mode: 'open' });

      //base do component <h1>Vinícius</h1>
      const componentRoot = document.createElement('h1');
      componentRoot.textContent = this.getAttribute('titulo'); //conteúdo

      //estilizar o component, criando CSS dinÇamico aqui mesmo
      const style = document.createElement('style');
      style.textContent = `
          h1 {
              color: red;
          }
      `;
      
      // enviar para a shadow (DOM shadow)
      shadow.appendChild(componentRoot); //representa o h1 
      shadow.appendChild(style); //representa o CSS
  }
}

customElements.define('titulo-dinamico', TituloDinamico); //tem sempre que usar o hífen no nome da tag

PROP sendo usado no HTML:

<titulo-dinamico titulo="TEXTO TEXTO"></titulo-dinamico>

Após rever a aula em que o professor contruiu a classe, não conseguia achar a solução. Foi quando resolvi colocar, diferente do que mostrava no vídeo, o atributo defer, pois ele se fez necessário pra esta TAG ser carregada quando uso conteúdo dinâmico.

Para quem não sabe do que se trata, o atributo defer diz ao navegador para executar o script apenas quando a análise do HTML estiver finalizada, e é recomendado pelo próprio professor nas aulas.

Aqui está um exemplo de uso do defer:

  <!-- JS: defer executa depois do processo de parsing o JS -->
  <script defer src="/src/components/CardNews.js"></script> 
  <script defer src="/src/components/TituloDinamico.js"></script>