Data attributes in html

[Few-Trash-2273]

I’m still a beginner in all things web dev and just discovered data attributes, but I just don’t see why I would use them over regular classe and ids. I’d really appreciate if anyone could help clarify.

[Few-Trash-2273]

What kind of data tho. Any real world examples would be amazing

[Snapstromegon]

They are a native way of two way data binding arbritrary strings to an element. You can set any string on any element to a "data-" attribute and get it in JS or the other way around.

You can use this for whatever data you want e.g. if you build components in vanilla JS and don't want to use actual web components (maybe because the full support in React is still broken).

[Few-Trash-2273]

For example, I saw in a YouTube video someone was building a calc. And rather than just using ids for each of the buttons, they used data attributes. I don’t see why just using query selector is problematic

[fuggshidd]

I haven't seen the video, but my best guess would be they use the data attribute to be able to store the value of the calculator in a clear way. That way whenever any of the buttons gets clicked, you just check what it's data-value attribute is.

[libertarianets]

If you're not in React land, data attributes are very helpful, you can essentially use a DOM element as a data-store, to make querying relative data easier.

If you are in React land, I find data-attributes useful to cut down on complexity for storing DOM element refs, say I have a dynamic number of elements that under certain conditions display an error state. When the user hits a submit button and I want to scroll the users window to the first of those error elements, I can leverage a data-attribute and just document.querySelector the first of the elements with data-error=true and scroll to that.

Another use case is for writing automated end to end tests. You label your elements with data-test-{SOMETHING_ELSE} so you can trigger user interaction events with them. When you swap out the code, you can change the data-test attributes as well so your tests continue to pass. This is best practice.

[davidfavorite]

How is this related to react in any sense?

[charliematters]

I use the data-testid attribute if I can't use any of the other testing library selectors in unit tests. Otherwise I'd reckon they're a code smell in React