Diferencias entre los atributos HTML y las propiedades del DOM

Diferencias entre los atributos HTML y las propiedades del DOM

Los atributos HTML y las propiedades del DOM son cosas fundamentalmente distintas. Pueden tener un atributo y una propiedad con el mismo nombre, pero configurarse con valores diferentes.

• Diferencias principales entre atributos y propiedades

  • Serialización HTML: los atributos se serializan como HTML, pero las propiedades no
  • Tipo de valor: los valores de los atributos siempre son cadenas, pero las propiedades pueden ser de cualquier tipo
  • Sensibilidad a mayúsculas y minúsculas: los nombres de los atributos no distinguen mayúsculas de minúsculas, pero los nombres de las propiedades sí. Sin embargo, los valores de los atributos sí distinguen mayúsculas de minúsculas

• Reflection

  • Por conveniencia, la mayoría de las especificaciones crean un equivalente en propiedad para todos los atributos definidos
  • Cuando una propiedad refleja un atributo, el atributo es la fuente de los datos. Si se establece el atributo, la propiedad se actualiza, y si se lee desde la propiedad, se lee el atributo
  • Pero algunos reflejos son más complejos. A veces el nombre del atributo y el nombre de la propiedad que lo refleja son distintos

• Validación, coerción de tipos y valores predeterminados

  • Los atributos tienen validación y valores predeterminados, pero las propiedades no
  • Algunas propiedades realizan coerción de tipos

• El value de los campos input

  • Existe el atributo value y la propiedad value, pero la propiedad value no refleja el atributo value. En su lugar, la propiedad defaultValue es la que refleja el atributo value
  • La propiedad value no refleja ningún atributo. Esto no es raro; muchas propiedades como offsetWidth y parentNode también son así
  • La propiedad value sigue inicialmente a la propiedad defaultValue. Después, si la propiedad value se establece mediante JavaScript o por interacción del usuario, cambia a un valor interno

• Los atributos deberían ser para configuración

  • Los atributos deberían ser para configuración, y las propiedades deberían poder contener estado
  • El árbol light-DOM debería tener un único propietario
  • Los elementos <details> y <dialog> representan el estado open con el atributo open, y el navegador agrega o elimina este atributo por sí mismo en respuesta a la interacción del usuario. Esto se considera un error de diseño

• Cómo manejan la diferencia los frameworks

  • Preact y VueJS, si propName in element, establecen el prop como propiedad; de lo contrario, establecen un atributo. Prefieren propiedades sobre atributos
  • React hace lo contrario. Establece atributos, salvo en casos predefinidos donde prefiere propiedades
  • lit-html mantiene la distinción entre atributos y propiedades; para establecer una propiedad en lugar de un atributo, hay que anteponer un . al nombre

Opinión de GN⁺

• Conocer la diferencia entre los atributos HTML y las propiedades del DOM es importante al trabajar con el DOM a bajo nivel. En la mayoría de los casos no hay una gran diferencia, pero hay que tener cuidado al usar frameworks

• Parece deseable distinguirlos de modo que los atributos representen configuración (configuration) y las propiedades representen estado (state). Da algo de pena que algunos elementos HTML recientes no respeten esto

• Hay que tener especial cuidado al usar elementos personalizados en React. React configura los props de los elementos personalizados como atributos en lugar de propiedades, por lo que las cosas que solo funcionan vía propiedad pueden no funcionar. Está previsto que esto mejore en React 19

• También es interesante comparar cómo frameworks principales como Preact, Vue, React y lit-html manejan atributos y propiedades. Eso refleja la filosofía y las decisiones de diseño de cada framework

• Los estándares web y la implementación de los navegadores no siempre son amigables para los desarrolladores. El caso representativo es el atributo y la propiedad value del elemento <input>. Parece difícil cambiarlo fácilmente por compatibilidad hacia atrás, pero ojalá en adelante haya diseños más consistentes

[superwoou]

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

[superwoou]

Parece que attribute y property fueron traducidos como la misma "propiedad"..