Good article. There is also a nice middle ground with the data-attributes:

```

<div id="myDiv" data-payload="something"></div>

```

These data-attributes are then automatically available to JavaScript as a read+write property:

```

document.getElementById('myDiv').dataset.payload == "something"

```

However, one has to be mindful that HTML attributes use -kebab-case- while JavaScript uses camelCase. Thus

```

<div id="example-div" data-my-cool-data-attribute="fun"></div>

```

becomes

```

document.getElementById('example-div').dataset.myCoolDataAttribute == "fun"

```