HTML Attributes vs. DOM Properties

Attributes and properties are fundamentally different things. So when you're looking at the elements panel in browser developer tools, you're only seeing attributes on elements, not properties. The "Content attributes" section defines the attributes, and the "DOM interface" defines the properties. In my opinion, attributes should be for configuration, whereas properties can contain state. It breaks the idea that attributes are for configuration, but more importantly it means that the system in charge of maintaining the DOM needs to be prepared for the DOM to change itself. Since they're custom, their properties aren't in React's 'predefined list', so they're set as attributes instead. Anything that's property-only on the custom element simply won't work. That's pretty much everything I know about the difference between properties and attributes.