📝 Exemplo 03 - x-text e x-html

1. x-text Simples

x-text define o texto do elemento (sem HTML)

2. x-text com Expressões

Nome Completo:

Com template literal:

x-text suporta qualquer expressão JavaScript

3. x-text com Operador Ternário

Status:

Categoria:

Operador ternário: condição ? valor_verdadeiro : valor_falso

4. x-text Chamando Métodos

Original:

Maiúscula:

Invertido:

x-text pode chamar funções e usar seus retornos

5. x-text Dinâmico (com Entrada)

Você digitou:

x-text atualiza automaticamente quando os dados mudam

6. x-html Simples

x-html renderiza conteúdo HTML (cuidado com XSS!)

7. x-html com Múltiplas Tags

Clique aqui' }">
x-html pode conter estruturas HTML complexas

8. Diferença: x-text vs x-html

Usando x-text:

Usando x-html:

x-text escapa HTML (mostra como texto), x-html renderiza como HTML

9. ⚠️ Aviso de Segurança com x-html

NUNCA use x-html com conteúdo fornecido pelo usuário!

Exemplo perigoso: 
<div x-html="usuarioTexto"></div>
Um usuário malicioso poderia injetar: 
<img src=x onerror="alert('XSS')">

10. x-html Seguro com Dados Controlados

${this.usuario.nome}

${this.usuario.bio}

` } }">
Use x-html apenas com dados que você controla