Cool! What is the syntax for that?

Attributes can be used in selectors like this `div[data-my-data="stuff"]`.

CSS is very powerful here because you can take advantage of the other attribute selectors to find partial matches:

div[data-my-data^="my-prefix"] (selects by prefix)

div[data-my-data$="my-suffix"] (selects by suffix)

div[data-my-data*="my-substring"] (selects by substring)

Quite a few more of these:

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_s...

attr() can also be used to some degree https://developer.mozilla.org/en-US/docs/Web/CSS/attr

The attr() function is actually much more powerful in the spec (perhaps one of my favorite part of unimplemented CSS). According to the spec you can supply the type of the function and use it as value (not just content as of now):

    <div data-background="lime">Red (but could be lime)</div>

    div {
      background: red;
    }

    div[data-background] {
      background: attr(data-background color, red);
    }

So according to the spec, you should be able to control the sizes, color, and even animation timings with (non-style) attributes.

In reality though, whenever I think I need this advanced attr() function, I usually just solve the issue using Custom Properties on the `style` attribute:

   <div style="--background: lime">