diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 42bef92..d6b077b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -17,7 +17,7 @@ jobs:
       - name: Install webkit deps
         run: |
           sudo apt-get update 
-          sudo apt-get install libgstreamer1.0-0 libbrotli1 libopus0 libwoff1 libgstreamer-plugins-base1.0-0 libgstreamer-gl1.0-0 libgstreamer-plugins-bad1.0-0 libopenjp2-7 libwebpdemux2 libhyphen0 libgles2
+          sudo apt-get install libgstreamer1.0-0 libbrotli1 libopus0 libwoff1 libgstreamer-plugins-base1.0-0 libgstreamer-gl1.0-0 libgstreamer-plugins-bad1.0-0 libopenjp2-7 libwebpdemux2 libhyphen0 libgles2 libharfbuzz-icu0 libenchant1c2a
       - name: Cache node modules
         uses: actions/cache@v1
         env:
diff --git a/src/index.js b/src/index.js
index 42318d7..b86d083 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,27 @@
 import { h, cloneElement, render, hydrate } from 'preact';
 
 export default function register(Component, tagName, propNames, options) {
+	const resolvedTagName =
+		tagName || Component.tagName || Component.displayName || Component.name;
+
 	function PreactElement() {
 		const inst = Reflect.construct(HTMLElement, [], PreactElement);
 		inst._vdomComponent = Component;
 		inst._root =
 			options && options.shadow ? inst.attachShadow({ mode: 'open' }) : inst;
+
+		let template = document.getElementById(`${resolvedTagName}-styles`);
+		if (!template && options && options.styles) {
+			template = document.createElement('template');
+			template.id = `${resolvedTagName}-styles`;
+			template.innerHTML = `<style id='${resolvedTagName}-styles-tag'>${options.styles}</style>`;
+			document.head.appendChild(template.cloneNode(true));
+		}
+
+		if (template) {
+			inst._root.appendChild(template.content.cloneNode(true));
+		}
+
 		return inst;
 	}
 	PreactElement.prototype = Object.create(HTMLElement.prototype);
@@ -49,10 +65,7 @@ export default function register(Component, tagName, propNames, options) {
 		});
 	});
 
-	return customElements.define(
-		tagName || Component.tagName || Component.displayName || Component.name,
-		PreactElement
-	);
+	return customElements.define(resolvedTagName, PreactElement);
 }
 
 function ContextProvider(props) {