HTML Attributes vs. DOM Properties (jakearchibald.com)

Article summary

The article discusses the difference between HTML attributes and DOM properties, highlighting their distinct characteristics and use cases. Attributes exist in HTML and the DOM, whereas properties are DOM-only, and changes to attributes show up when serializing the DOM to HTML, whereas properties don't. The article also explores how frameworks like React, Preact, and VueJS handle the difference between attributes and properties. Understanding the distinction between attributes and properties is crucial for working with the DOM at a lower level.

Main themes

• HTML attributes vs DOM properties
• DOM serialization
• Framework handling of attributes and properties
• Custom elements
• Attribute and property reflection
• Data storage in the DOM

What commenters say

• Some developers argue that attributes should be used for configuration, while properties can contain state, and that this distinction is important for maintaining a clean and organized DOM.
• Others believe that using properties instead of attributes can be beneficial for storing complex data types, such as objects, without having to serialize them to strings.
• There is disagreement about whether React's approach to handling attributes and properties is correct, with some arguing that it can lead to unexpected behavior and others defending it as a necessary simplification.
• Some commenters point out that custom elements can be used to store data and methods that modify an element's behavior, and that this can be a useful way to extend the functionality of HTML elements.
• The use of data attributes is suggested as a way to store custom data in the DOM, and it is noted that these attributes can be accessed in CSS using attribute selectors.
• There is discussion about the potential for using the attr() function in CSS to access and manipulate attribute values, although this feature is not yet widely supported.
• Some commenters argue that the distinction between attributes and properties is not always clear-cut, and that different frameworks and libraries may handle them differently, leading to potential confusion and inconsistencies.