Write up rationale for why selectors in values are discouraged #12590
Description
The W3C Tag asked what seems like a reasonable question in a recent design review. @tabatkins suggested that the WG could write an explanation as to why the pattern of something like:
<style>
#spinner {
animation: spin 0.25s forwards paused;
animation-trigger: click(spin-trigger) once;
}
#details {
animation-trigger-name: spin-trigger;
}
@keyframes spin {
from { rotate: 0deg; }
to { rotate: 180deg; }
}
</style>
<div id="details">
Details
<svg id="spinner" style="width: 24px; height: 24px;">
<path d="M16.59 8.59 12 13.17 7.41 8.59 6 10 12 16 18 10Z"></path>
</svg>
</div>Is preferable to something like
<style>
#spinner {
animation: spin 0.25s forwards paused;
animation-trigger: click(#details) once;
}
@keyframes spin {
from { rotate: 0deg; }
to { rotate: 180deg; }
}
</style>
<div id="details">
Details
<svg id="spinner" style="width: 24px; height: 24px;">
<path d="M16.59 8.59 12 13.17 7.41 8.59 6 10 12 16 18 10Z"></path>
</svg>
</div>I will say that I also find the latter version considerably more readable and have even thought in the past that maybe we should have a (probably separate not live 60fps CSS) pattern for binding things like this.
In any case, I do think that a lot of people would ask this question and it would be very good for it to be documented somewhere rather than a sort of just leaning on a "that's the norm, we have reasons". Note that maybe somewhat relatedly, idref is also the norm for linking two elements together in HTML thusfar, but we also have element references now, and this issue also exists whatwg/html#10143. (note that is not an endorsement of 10143 either, it's just pointing that it seems to be asking a similar question in a way)