Getting HTML5 data-* attribute with Dart

Question

HTML 5 has a new data attribute data-*

Given the following usage:

   <ul>
     <li data-animal-type="bird">Owl</li>
     <li data-animal-type="fish">Salmon</li> 
     <li data-animal-type="spider">Tarantula</li> 
   </ul>

How could I access these attribute in Dart.

Answer 1

The Element class contains a dataset property that is designed to access (read and write) data attributes on element. It automatically prefix your attribute names with data, so you don't have to do it yourself:

var animalType = listItemElement.dataset['animalType];

One important thing is, that the dataset attribute converts all attribute names to camel-case. If you have animal-type you need to access animalType.

The data- prefix is required for custom attributes that should not affect the layout in HTML5. If you don't use it, validation of your document might not succeed.