User defined attributes are powerful for two reasons:


  • You can store data as a part of the tag itself rather than in memory. This is extremely powerful when it comes to data binding, since it allows you to search the document and collect all elements that are bound to a particular field, and change or update the values in one clean operation (without having to go the long route via code).
  • Attributes are subject to mutation events (read: observers), so you can create an observer that signals you whenever a specific attribute changes value in the DOM itself. This is absurdly powerful in the right circumstances, but rarely used due to the obvious overhead and cost. It is a way of saying "let me know when any element, regardless of which, has this attribute with this value", and the browser will watch out for that and signal you when it happens.
  • Attributes can be targeted from CSS. So you can define a CSS style that only affects elements that have a specific attribute and value! That is incredibly useful!


Example of CSS rule that targets a specific attribute:


.TQTXListViewItem[data-selected-item="true"] {

 background-color: #FF0000;

}


The above CSS simply means:

  1. If an element has TQTXListViewItem style selected
  2. ..and it has an attribute called "data-selected-item"
  3. ..and this attribute has the value "true"
  4. then apply the following changes.


Needless to say, this makes it a lot easier to deal with styling of selected items. Once you have defined a rule that targets a specific attribute and value, all you have to do is write an attribute to your child widget (or the main widget itself) and the style changes happens immediately.