Svelte: using refs in css

[shancarter]

When I use a ref, I most often also want to get a handle to it with css, which leads to slightly annoying, duplicative markup.

<style>
  .container {
    color: red
  }
</style>
<div class="container" ref:container></div>

The only solutions I can think of to mitigate this are untenable, but thought I raise this if others see something better.

• Make nodes with ids available as refs, like polymer's static node map
• Make svelte refs available as synthetic css selectors
• Make a syntax shortcut for declaring refs as classes, e.g. <div ref:class:container ></div>

[Rich-Harris]

What about this?

<style>
  ref:container {
    color: red
  }
</style>
<div ref:container></div>

It's valid CSS so shouldn't present any problems with parsing/syntax highlighting etc (csstree thinks it's a ref TypeSelector followed by a container PseudoClassSelector, which isn't ideal but we can work with it), and it has a neat symmetry.

Probably best to avoid id attributes, because you'd be forced to choose between a) confounding people's expectations that the id would show up in the DOM or b) potentially having duplicate IDs, and because it wouldn't work so well inside each blocks (should we get round to supporting refs in each blocks — #368).

[shancarter]

This would solve my use case, but one potential problem I could see with others is being explicit about how it fits into existing CSS rules. Who would win in this example?

<style>
ref:container .child {
  color: blue;
}
#id .child {
  color: red;
}
</style>
<div id="id" ref:container>
  <div class="child"></div>
</div>

Under the hood were you thinking it would get a svelte-123abc attribute and you would use an attribute selector in the generated CSS?

[Rich-Harris]

Good point. I think it probably makes sense if ref:container has a lower specificity than an ID selector — I for one have internalised the rule that ID selectors trump other kinds, so I imagine other developers have too.

If it was implemented with a svelte-123abc-1 attribute (and svelte-123abc-2, and so on) then it would sit just below selectors with specified class names or attributes (which feels intuitive I think), because the .foo would become .foo[svelte-123xyz] which obviously has a greater specificity than [svelte-123abc-1].

<div ref:container class='foo'>
  this text would be red
</div>

<style>
  .foo {
    color: red;
  }

  ref:container {
    color: blue;
  }
</style>

Turns out class and attribute selectors have the same specificity, so we could implement this with attributes or class names (and change our mind later, crucially) without breaking anything.

[shancarter]

Could maybe use the ref id instead of an index as suffix to the svelte component id.

svelte-123abc-container

[Rich-Harris]

This is implemented in 1.28 — thanks for the great idea