DEV Community

Cover image for HTML Data Attributes: One of the Original State Management Libraries

HTML Data Attributes: One of the Original State Management Libraries

Nick Taylor on November 30, 2023

I was streaming recently and discussed how I implemented part of a graph I was building out. The graph is interactive, where you can navig...
Collapse
 
viniciusferreira profile image
Vinícius Ferreira •

👋🏻 Nick

Loved your piece! 👏🏻

Just a quick tip: I looked at the PR and you can leverage Tailwind's group, data, focus and hover utilities to conditionaly apply styles, no JS needed.

Here's an example of something similar:

<div data-size="medium" class="group/root">
  <div class="group-data-[size=large]/root:p-8">
    <!-- Will not apply `p-8` -->
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

from github.com/tailwindlabs/tailwindcs...

Keep up the great work!

Cheers!

Collapse
 
viniciusferreira profile image
Vinícius Ferreira •

Check 'first', 'last' and the other modifiers too, they can help with a lot more 😄

tailwindcss.com/docs/hover-focus-a...

Collapse
 
nickytonline profile image
Nick Taylor •

Nice! This is the first project I've used Tailwind in, so thanks for the tips!

Hot Rod saying Cool beans!

Thread Thread
 
viniciusferreira profile image
Vinícius Ferreira •

Hope you enjoy Tailwind! You can DM me @constVinicius if you need help with those utilities 👷🏻‍♂️🛠

Collapse
 
codingjlu profile image
codingjlu •

I love the creativity here. I do think, however, that calling data attributes a state management library is a bit of a stretch, as it lacks key built-in features like subscriptions and access everywhere. Just listening for a change in data attributes is hectic, requiring lots of boilerplate cruft using mutation observers and the such... the only straightforward way I can see this is with using web components, but managing other components' states are still wildly complicated, and thus I don't think it really solves the final state management problem as a whole. Thoughts?

Collapse
 
nickytonline profile image
Nick Taylor •

Thanks for giving it a read @codingjlu!

It's definitely not a full-blown state management library. 😅 I was being cheeky/click baity by saying that.

The point was to more leverage what's in your browser for state when it makes sense, like the URL and data-attributes.

Collapse
 
codingjlu profile image
codingjlu •

Got it, and I'm all for frameworkless stuff, so this resonates quite a bit. 👍

Collapse
 
aminiyehia1 profile image
Amini Yehia •

nice article

Collapse
 
nickytonline profile image
Nick Taylor •

Thanks Amini!

Captain America saluting

Collapse
 
arodriguezhacks profile image
Angie Rodriguez •

Helpful article, thank you for putting it together and providing good context for how data attributes came into existence.

Collapse
 
nickytonline profile image
Nick Taylor •

Thanks for the kind words Angie. Gald you liked it!