Uso inadequado de innerHTML.

Pessoal, eu estou com uma pulguinha atrás da orelha, eu até voltei nessa aula para ver se tinha essa dúvida no fórum mas eu não achei. Então, já desculpa aí se o tópico é repetido.

O instrutor usa o template string para criar dinamicamente o parágrafo, e por isso usou o innerHTML. Beleza, o problema é que do jeito que o código está, o usuário pode usar o campo de digitação e criar dinamicamente qualquer elemento. Eu testei e consegui.

Eu tentei rodar um script e não funcionou, mas eu acho que isso tem a ver com o chrome. E se for um navegador que não tem essa proteção, eu posso escrever o script que eu quiser?

Nesse caso não seria melhor criar o parágrafo com o createElement e usar o textContent para atribuir o valor do input?

Segue o código:

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')
    tarefa.classList.add('task')

    const conteudo = `<p class="content">${valor}</p>`

    tarefa.innerHTML = conteudo

    lista.appendChild(tarefa)
    input.value = " "

}