Ability to load external CSS in Web Component.

public/index.html

@@ -18,6 +18,9 @@
 		name="Studio Clock" 
 		logo="https://o94.at/themes/custom/radio_orange/logo1.png" 
 		logosize="180px" 
-		api="http://localhost:3333/api/v1/" />
+		api="http://localhost:3333/api/v1/"
+		css="http://localhost:3333/css/aura.css">
+		
+	</aura-clock>
 </body>
 </html>

src/StudioClock.svelte

 <svelte:options tag="aura-clock"/>
+<main bind:this={rootElement}></main>
 <script>
 	import { onMount } from 'svelte';
+	export let css = "";
 	export let api = "http://localhost:3333/api/v1";
 	export let name = "Studio Clock";
 	export let logo = "https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png";
@@ -9,7 +11,7 @@
 
 	let time = new Date(); 
 	let queryCurrent = "/clock";
-
+	let rootElement;
 	let data;
 	let currentTrack = null;
 	let timeLeft;
@@ -34,7 +36,6 @@
 				data = null;
 				data = fetchApi(queryCurrent);
 			}
-
 		}, 1000);
 
 		return () => {
@@ -42,7 +43,6 @@
 		};
 	});
 
-
 	async function fetchApi(query) {
 		let response;
 		let data;
@@ -68,7 +68,13 @@
 		}
 	}
 
-	function setCurrentTrack(info) {
+	function initComponent(info) {
+
+		/* Load external CSS */
+		if (css != null)
+			loadExternalCss(rootElement, css);
+
+		/* Set currently loaded data */
 		if (currentTrack == null && info != null && info.track != null) {
 			currentTrack = info;
 			
@@ -155,7 +161,13 @@
 		return false;
 	}
 
-
+	function loadExternalCss(root, file) {
+		let element = document.createElement("link");
+		element.setAttribute("rel", "stylesheet");
+		element.setAttribute("type", "text/css");
+		element.setAttribute("href", file);
+		root.appendChild(element);
+	}
 	
 </script>
 
@@ -416,8 +428,7 @@
 				<span class="sr-only">Loading...</span>
 			</div>
 		{:then value}
-			{setCurrentTrack(value)}
-			<!-- <h2>&#9654; Playing</h2> -->
+			{initComponent(value)}
 			
 			{#if value.current.show}