Sobre o "IIFE" que encapsula todo o código, protegendo ele de ser exposto no navegador até aí entendi. A questão que não entendi, é sobre quando é ultilizado os "módulos" que encapsula somente os componetes BotaoConclui e BotaoDeleta e é tirado do código do arquivo main.js os códigos (() => Aqui o código completo })(); do "IIFE". Nesse caso todos os códigos do arquivo main.js ficam desprotegidos? E as funções concluirTarefa e deletarTarefa que não foram envolvidas nos módulos? Também ficam expostas no navegador? Qual seria a importância então de ultilizar o "IIFE" no código completo? E agora é protegido somente 2 componentes ao invés do código completo. Não entendi bem isso. E a minha dúvida acerca dos Componentes, é que eles só é usados quando trata-se de botões na aplicação? Ou é usados para fazer outra coisa também? E quais são como por exemplo? quando usa label? ou quando usa input? quais os exemplos que pode ser ultilizados os componentes?

Códigos do arquivo main.js

// Função de invocação imediata abaixo ==> Vamos utilizar a “IIFE”, ou Immediately Invoked Function Expression ou “Função de Invocação Imediata”. Faz com o que ninguém tenha acesso a nenhuma função de dentro do código, apenas tenha acesso a interação com a página
// (() => { Aqui o código completo })();

import BotaoConclui from "./componentes/concluiTarefa.js";
import BotaoDeleta from "./componentes/deletaTarefa.js";

    const criarTarefa = (evento) => {

        evento.preventDefault();

        const lista = document.querySelector('[data-list]');
        const input = document.querySelector('[data-form-input]');
        const valor = input.value;

        const tarefa = document.createElement('li'); /* Cria um novo elemento */
        tarefa.classList.add('task'); /* Adciona a classe na 'li' criada */
        const conteudo = `<p class="content">${valor}</p>`; /* “Template String” */

        tarefa.innerHTML = conteudo; /* Faz aparecer a tag 'p' com o seu valor dentro das chaves */

        tarefa.appendChild(BotaoConclui()); /* Cria o botão através da função, com escrita, estilo e evento de click */
        tarefa.appendChild(BotaoDeleta());
        lista.appendChild(tarefa); /* Cria(anexa) o elemento filho dentro do elemento pai */
        input.value = " ";
    }

    const novaTarefa = document.querySelector('[data-form-button]');

    novaTarefa.addEventListener('click', criarTarefa);

Códigos do arquivo deletaTarefas.js

const BotaoConclui = () => {
        const botaoConclui = document.createElement('button');

        botaoConclui.classList.add('check-button'); // add => adiciona o nome da classe que está entre as aspas simples
        botaoConclui.innerText = 'concluir'; // Adciona o texto que está entre as aspas simples dentro do botão

        botaoConclui.addEventListener('click', concluirTarefa);

        return botaoConclui;
}

const concluirTarefa = (evento) => {
    const botaoConclui = evento.target; // sabe qual o alvo do evento, ou seja, em quem clicou ou qual elemento foi clicado

    const tarefaCompleta = botaoConclui.parentElement; // Sobe um nó na árvore, que é a 'li', ou seja, busca o pai do elemento que é pai do botão

    tarefaCompleta.classList.toggle('done'); // .toggle() => Método que executa o efeito de rabisco do CSS e é capturado a classe pelo 'classList'. o toggle faz um verdadeiro ou falso (booleano)
}

export default BotaoConclui

/* Para exportar mais de uma função

export {
    concluiTarefa,
    deletaTarefa
}

*/

Códigos do arquivo concluiTarefas.js

const BotaoDeleta = () => { // inicia com letra maiúscula pelo motivo de ser um Componente
        const botaoDeleta = document.createElement('button');

        botaoDeleta.innerHTML = 'Deletar';
        botaoDeleta.addEventListener('click', deletarTarefa);

        return botaoDeleta;
}

const deletarTarefa = (evento) => {
    const botaoDeleta = evento.target;

    const tarefaCompleta = botaoDeleta.parentElement;

    tarefaCompleta.remove(); // método(função) que remove

    return botaoDeleta;
}

export default BotaoDeleta