title: Why doesn't Svelte scope the tag under a class but use individual tag.class to style a component?
body: <p>When a component has some CSS styles, it is natural to use</p>
  
  <pre><code>.my-component-01 h1 { ... }
  .my-component-01 h2 { ... }
  </code></pre>
  
  <p>to scope the styles, but Svelte uses</p>
  
  <pre><code>h1.svelte-hlsza1{color:orange}
  h2.svelte-hlsza1{background:yellow}
  </code></pre>
  
  <p>Is it more robust to actually scope it under a certain class (the top method) instead, because at least inside the HTML markup, the compiled code can just be:</p>
  
  <pre><code>&lt;div class="svelte-hlsza1"&gt;
    &lt;h1&gt; ...
    &lt;h2&gt; ...
  </code></pre>
  
  <p>instead of repeating the class name every time. (and I think the specificity is the same: 1 class and 1 tag name).</p>