Add comparisons between LRLR and Declarative CSS Modules

[KurtCattiSchmidt]

This change updates both the LRLR and Declarative CSS Modules explainers to cover differences between them in preparation for a TAG discussion.

[alisonmaher]

One of the drawbacks of this approach was the syntax. I think we had discussed an alternative that would feel more natural, although the exact details are escaping me. Do we want to update the syntax or add a section for an alternative syntax as part of this in case it helps when we go to re-review with the TAG?

[KurtCattiSchmidt]

The tricky thing is that we can't really change the syntax of Declarative CSS Modules without diverging from the Imperative version significantly. Let's leave this open until @dandclark returns - he might have some ideas here.

[alisonmaher]

Can we add a section on extensibility in this explainer and how we envision this applying to SVG?

So essentially this wouldn't apply to other reference types then? That does seem like it could be a drawback. I'd suggest expanding on this in the new extensibility section.

[KurtCattiSchmidt]

All of the scoping extensions would apply to any reference type, including SVG, link fragments, etc.

I'd like to keep the scoping extensions as a parallel subject, referenced here but defined elsewhere, so that the proposals don't get muddled together. Right now, I'm just referencing the bug, but it could be a separate explainer eventually. But we can ship LRLR without scoping and deliver that later, so I don't want to get too stuck on it here.

[KurtCattiSchmidt]

This is how it could look - I'll post it in the bug when I'm back from vacation:

SVG:

<template exportids="foo"><!-- Exports 'foo' to the light DOM -->
  <template exportids="foo">
    <svg height="100" width="100">
      <circle id="foo" r="45" cx="50" cy="50" fill="red" />
    </svg>
  </template>
  <svg height="100" width="100">
    <use href="#foo" /><!-- "foo" is in this shadow scope due to the "exportids" attribute above -->
  </svg>
</template>
<svg height="100" width="100">
  <use href="#foo" /><!-- "foo" is in the Light DOM scope due to the "exportids" attribute above -->
</svg>

Local anchors:

<template exportids="foo">
  <a name="foo">Link to foo</a>
</a>
<a href="#foo">Scroll to a shadow root!</a>

[alisonmaher]

Is there a way CSS Modules could end up being closer to HTML concepts if we adjust the syntax?

[KurtCattiSchmidt]

We could, but then it would diverge from Imperative CSS Modules. Let's sync with @dandclark once he's back.