title: How to apply CSS to the root of a Vue 3 component?
body: <p>I am moving Vue 2 source over to Vue 3 (beta), and came across this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;section id="this"&gt;   &lt;!-- how to eliminate this? --&gt;
      &lt;div&gt;
        YOU ARE AT HOME 
      &lt;/div&gt;
  
      &lt;h2&gt;Hi &lt;span&gt;{{ uid }}&lt;/span&gt;&lt;/h2&gt;
  
      &lt;!-- List the projects we have access to --&gt;
      &lt;div id="grid-container-projects"&gt;
        &lt;ProjectTile :project="null" /&gt;
        &lt;ProjectTile v-for="p in projectsSorted" :key="p.key" :project="p" /&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;style scoped&gt;
    #this {
      text-align: center;
    }
    ...
  </code></pre>
  
  <p>The details don't matter. Applying the <code>text-align: center</code> to the <code>#this</code> node is what I'd like to achieve, but without the <code>#this</code> node.</p>
  
  <p>Is this possible, or reasonable? :)</p>
  
  <p>I tried the following: </p>
  
  <pre><code>&lt;template&gt;   &lt;-- Vue 3 (beta) --&gt;
    &lt;div&gt;
      YOU ARE AT HOME 
    &lt;/div&gt;
   ...
  &lt;/template&gt;
  
  &lt;style scoped&gt;
    * { 
      text-align: center
    }
    ...
  </code></pre>
  
  <p>This does the wished layout, but causes a stack overflow in the browser. That may of course be just a Vue 3 betaism. (3.0.0-beta.4)</p>
  
  <p>How would you proceed? Leave the <code>section</code> as is, or get rid of it, somehow?</p>