Immediately after switching the page, it will work with CSR.
Please reload your browser to see how it works.
So in a sense the name of getAttribute(name) is misleading: it's probably better renamed getAttributeValue(name), because it doesn't really return an attribute (in the sense of an Attr node), but the value of the `value` property of the attribute node (owned by the element on which it is called) whose name is `name`.
See:
https://developer.mozilla.org/en-US/docs/Web/API/Element/get...
https://developer.mozilla.org/en-US/docs/Web/API/Element/get...
This behaviour is all downside and no upside.
The spec should have simply defined a dom object and a javascript object to be one and the same, with attributes and properties being the same thing.
```
<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"
```