A diferença entre atributos HTML e propriedades DOM

A diferença entre atributos HTML e propriedades DOM

Atributos HTML e propriedades DOM são coisas fundamentalmente diferentes. Eles podem ter um atributo e uma propriedade com o mesmo nome, mas podem ser definidos com valores diferentes.

• Principais diferenças entre atributos e propriedades

  • Serialização em HTML: atributos são serializados em HTML, mas propriedades não
  • Tipo de valor: valores de atributos são sempre strings, mas propriedades podem ser de qualquer tipo
  • Sensibilidade a maiúsculas e minúsculas: nomes de atributos não diferenciam maiúsculas de minúsculas, mas nomes de propriedades diferenciam. No entanto, valores de atributos diferenciam maiúsculas de minúsculas

• Reflection

  • Por conveniência, a maioria das especificações cria um equivalente em propriedade para todos os atributos definidos
  • Quando uma propriedade reflete um atributo, o atributo é a fonte dos dados. Ao definir o atributo, a propriedade é atualizada, e ao ler da propriedade, lê-se o atributo
  • Mas alguns refletores são mais complexos. Às vezes, o nome da propriedade e o nome do atributo que ela reflete também são diferentes

• Validação, coerção de tipo e valores padrão

  • Propriedades têm validação e valores padrão, mas atributos não
  • Algumas propriedades realizam coerção de tipo

• value em campos input

  • Existe o atributo value e a propriedade value, mas a propriedade value não reflete o atributo value. Em vez disso, a propriedade defaultValue reflete o atributo value
  • A propriedade value não reflete nenhum atributo. Isso não é raro, e muitas propriedades como offsetWidth, parentNode etc. também são assim
  • A propriedade value inicialmente segue a propriedade defaultValue. Depois, quando a propriedade value é definida por JavaScript ou por interação do usuário, ela muda para um valor interno

• Atributos devem servir para configuração

  • Atributos devem servir para configuração, e propriedades devem poder conter estado
  • A árvore light-DOM deve ter um único proprietário
  • Os elementos <details> e <dialog> representam o estado open com o atributo open, e o navegador adiciona/remove esse atributo por conta própria em resposta à interação do usuário. Isso é visto como um erro de projeto

• Como os frameworks lidam com a diferença

  • Preact e VueJS usam propName in element e, se for verdadeiro, definem o prop como propriedade; caso contrário, definem como atributo. Eles preferem propriedades a atributos
  • React faz o contrário. Ele define atributos, exceto em casos predefinidos nos quais prefere propriedades
  • lit-html mantém a distinção entre atributos e propriedades, e para definir uma propriedade em vez de um atributo é preciso adicionar . antes do nome

Opinião do GN⁺

• Saber a diferença entre atributos HTML e propriedades DOM é importante ao trabalhar com DOM em baixo nível. Na maioria dos casos, não há grande diferença, mas é preciso cuidado ao usar frameworks

• Parece desejável distinguir atributos como configuração (configuration) e propriedades como estado (state). É uma pena que alguns elementos HTML recentes não sigam isso

• É preciso atenção especialmente ao usar elementos personalizados no React. Como o React define os valores de elementos personalizados como atributos em vez de propriedades, itens que aceitam apenas propriedades podem não funcionar. Isso deve melhorar no React 19

• Também é interessante comparar como grandes frameworks como Preact, Vue, React e lit-html tratam atributos e propriedades. Isso reflete a filosofia e as decisões de design de cada framework

• Os padrões web e a implementação dos navegadores nem sempre são amigáveis para desenvolvedores. O caso do atributo e da propriedade value do elemento <input> é representativo. Por causa da compatibilidade retroativa, parece difícil mudar isso facilmente, mas seria bom ver um design mais consistente no futuro

[superwoou]

https://emewjin.github.io/html-attribute-dom-property/

[superwoou]

attribute e property foram traduzidos como o mesmo “atributo” mesmo assim..