title: Vue3 Styling Nested Single File Components
body: <p>I am using Vue 3 to create some Web Components.  I would like to use Single File Components and be able to nest them and deploy, but the styling is missing on the child component.</p>
  <p><a href="https://i.stack.imgur.com/9JAIe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9JAIe.png" alt="enter image description here" /></a></p>
  <p>I have simplified what I am trying to do with the following example.</p>
  <p>MDivElement.ce.vue - a div that wraps MButton</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;mdiv&quot;&gt;
      MDiv
      &lt;MButtonElement&gt;MButton&lt;/MButtonElement&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import MButtonElement from &quot;./MButtonElement.ce.vue&quot;;
  export default {
    components: {
      MButtonElement,
    },
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  #mdiv {
    color: blue;
  }
  &lt;/style&gt;
  </code></pre>
  <p>MButtonElement.ce.vue - a simple Button</p>
  <pre><code>&lt;template&gt;
    &lt;button id=&quot;mbutton&quot;&gt;MButton&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {};
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  #mbutton {
    color: red;
  }
  &lt;/style&gt;
  </code></pre>
  <p><a href="https://codesandbox.io/s/quizzical-allen-xj74zt?file=/index.html" rel="nofollow noreferrer">Example</a></p>
  <p>My problem is that all the style is gone from the button when using <code>&lt;m-div&gt;&lt;/m-div&gt;</code></p>
  <p><strong>Can SFC be nested (with styles) and used as Web Components?</strong></p>
  <p>I will compile using Vite and distribute.</p>
  <p>Thanks!</p>