📝 Improve usage docs and add integration guide

Related to: #1

Author: MonkeyAndres

README.md

@@ -11,19 +11,33 @@ TODO:
 - [x] SCSS and Sass support
 - [x] Svelte transitions support
 
-## How to use?
+## Usage
+
+### How to modify the template?
 
 Clone it with [degit](https://github.com/Rich-Harris/degit):
 
-```sh
+```bash
 npx degit redradix/svelte-custom-element-template my-new-component
 cd my-new-component
-npm install # or yarn
+
+yarn install # or npm
+yarn start
 ```
 
-The code of your component lives inside `/src/index.svelte`, this is the main point for either Storybook and the building process. It's important that this file has it's own style tag with content in it, otherwise we cannot inject the styles of your app inside the shadow DOM of the custom element. ([read the build script](./scripts/build.js))
+Start making your own modifications watching changes in Storybook.
 
-The global styles for your Svelte component lives inside `/src/styles.svelte`, this file is important because we get the compiled CSS from this and inject it in Storybook so you can have global styles in all your stories without the need to duplicate this styles.
+### How to integrate the component in your project?
+
+1. Build the component using `yarn build`
+2. (Optional) Create a `public` folder
+3. (Optional) Create an `public/index.html` file
+4. Copy the built component inside a `vendor` folder (accesible from `index.html`)
+5. Import the component from the HTML using the `defer` attribute
+   ```html
+   <script defer src="vendor/svelte-custom-element.0.1.0.min.js"></script>
+   ```
+6. Open the `index.html` and enjoy the web component
 
 ## Why?
 Building custom elements with Svelte is really easy but have a lot of limitations, is this template I'm trying to show the way I solve most of these limitations.
@@ -35,6 +49,12 @@ Svelte current limitations:
 * [Transitions in custom Elements](https://github.com/sveltejs/svelte/issues/1825)
 * [Context API doesn't work for custom elements](https://github.com/sveltejs/svelte/issues/3422)
 
+## How does this template work?
+
+The code of your component lives inside `/src/index.svelte`, this is the main point for either Storybook and the building process. It's important that this file has it's own style tag with content in it, otherwise we cannot inject the styles of your app inside the shadow DOM of the custom element. ([read the build script](./scripts/build.js))
+
+The global styles for your Svelte component lives inside `/src/styles.svelte`, this file is important because we get the compiled CSS from this and inject it in Storybook so you can have global styles in all your stories without the need to duplicate this styles.
+
 ## Available scripts
 
 * `start`: runs the storybook, this is used when develop because of the live reloading