title: Creating a svelte component for razor cshtml
body: <p>I have a Umbraco based application that outputs normal razor views. I now want to dip my feet and build a svelte component. The one I picked to start with is a signup flow.</p>
  
  <p>I built the component with some svelte files. I then wanted to compile it with webpack and babel, so I created an entry point like this (I thought I would add more components here later)</p>
  
  <pre><code>import Signup from './Components/Signup/signup.svelte';
  
  new Signup({
      target: document.querySelector('#signup-form'),
      props: {
          someInputData: 'aStaticValue'
      }
  });
  </code></pre>
  
  <p>That outputs an app.js which I then include in _Layout.cshtml with a normal <code>&lt;script src="~/Content/Scripts/app.js"&gt;&lt;/script&gt;</code></p>
  
  <p>Now any page that has an element with id="signup-form" will get the signup form.
  This is where I run into problems.</p>
  
  <ol>
  <li>My page is multilingual so the component needs to get the translated texts for to use for signup flow from the CMS (so the razor cshtml view knows these values but not component).</li>
  <li>Let's imagine that if my user is logged in I want to prefill the user's Email address in the signup flow. Then the component would need to get said email address as initialization value. So again my .net application and razor/cshtml knows about this but how can I give it to the svelte app that is initialized by app.js?</li>
  </ol>
  
  <hr>
  
  <p><strong>TL;DR</strong> How can I get values to my svelte component during initialization from the normal HTML view that displays the component?</p>