title: Pass global styles down to Svelte "custom element" components
body: <p>I am &quot;attempting&quot; to use Sveltejs as a front-end web framework for a project built on Django (relevant as it defines the structure of my application).  I am attempting to include Svelte components onto the various templates I have built for my Django application.  Now, using the <code>customElement</code> API, I was able to compile and use my Svelte components as custom elements directly in my HTML templates which was great except for one major problem: my global styles weren't propagating to the components.  This is, as I found out, because all custom elements are actually compiled as web components, meaning they wrap their internal HTML to prevent styles from affecting them.  This is not the behavior I want.  However, it seems to be the only real way to use my Svelte components in a way that works cohesively with my HTML templates.  How do I solve this problem?</p>
  <p>I am using <code>webpack</code> as my module bundler.  I can comment a gist link to my <code>webpack.config.js</code> if it would be helpful, but as you can imagine, I am compiling for multiple Django &quot;apps&quot; and so my config is a bit messy.  For reference, I have gotten everything including local styling with Sass and custom elements to work as intended.  This is simply a question of &quot;how to do something&quot; which despite me spending literal hours Googling, I have been unable to find a clear answer to.</p>
  <p>I know you can use the client API directly to access components, but not only is this tedious and messy (especially if I need to compose components on different HTML templates together), but I can't seem to get <code>webpack</code> to expose my Svelte components as Javascript classes.  Here is how I am doing this approach (which is not working):</p>
  <pre><code>&lt;!-- in the head --&gt;
  &lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;
  
  &lt;!-- in the body --&gt;
  &lt;script&gt;new bundle.App{target: ...}&lt;/script&gt;
  </code></pre>
  <p>It is telling me that <code>App</code> is not defined.  Here is what my individual <code>output</code> configs in my <code>webpack.config.js</code> look like:</p>
  <pre><code>output: {
      library: 'bundle',
      // I do not understand at all what these two lines do -- I just found 
      // them somewhere on the interwebs as a suggestion to solve this problem
      libraryTarget: 'umd', 
      umdNamedDefine: true,
      // path, filename, etc.
  }
  </code></pre>
  <p>To boil this down, I really have three, intertwined questions:</p>
  <ol>
  <li>Can I use the <code>customElement</code> API (which I much prefer) and still apply global styles?</li>
  <li>If I can't use the <code>customElement</code> API, is there a better approach to this problem that would allow for global styles?</li>
  <li>If there is no other option, how do I properly use the client API with <code>webpack</code>?</li>
  </ol>