diff --git a/app/index.html b/app/index.html
index 224350f..54236dc 100644
--- a/app/index.html
+++ b/app/index.html
@@ -16,6 +16,7 @@
     <div>
       <h1>SHORTSTACK</h1>
       <small>v1.1.1</small>
+      <custom-element></custom-element>
     </div>
 
     <svg class="hex" x="0px" y="0px" viewbox="-10 -10 320 320" xml:space="preserve">
diff --git a/app/js/custom-element/custom.element.css b/app/js/custom-element/custom.element.css
new file mode 100644
index 0000000..0b28763
--- /dev/null
+++ b/app/js/custom-element/custom.element.css
@@ -0,0 +1,7 @@
+:host {
+  display: grid;
+
+  & > div {
+    color: var(--brand);
+  }
+}
\ No newline at end of file
diff --git a/app/js/custom-element/custom.element.js b/app/js/custom-element/custom.element.js
new file mode 100644
index 0000000..ad11a95
--- /dev/null
+++ b/app/js/custom-element/custom.element.js
@@ -0,0 +1,28 @@
+import {constructStylesheet} from '../utils.js'
+import styles from './custom.element.css'
+
+export default class CustomElement extends HTMLElement {
+  
+  constructor() {
+    super()
+
+    this.$shadow            = this.attachShadow({mode: 'closed'})
+    this.$shadow.innerHTML  = this.render({name: 'My Custom Element'})
+
+    this.styles = constructStylesheet(styles)
+  }
+
+  connectedCallback() {
+    this.$shadow.adoptedStyleSheets = [this.styles]
+  }
+
+  disconnectedCallback() {}
+
+  render({name}) {
+    return `
+      <div>${name}</div>
+    `
+  }
+}
+
+customElements.define('custom-element', CustomElement)
\ No newline at end of file
diff --git a/app/js/index.js b/app/js/index.js
index 69ad695..74e4799 100644
--- a/app/js/index.js
+++ b/app/js/index.js
@@ -1,6 +1,3 @@
 // import Whatever from 'https://unpkg.com/whatever'
 // import Whatever from 'whatever'
-
-// import { default as index_css }  from './css/index.css'
-// console.info(index_css)
-console.log('💀🤘')
\ No newline at end of file
+import './custom-element/custom.element.js'
diff --git a/app/js/utils.js b/app/js/utils.js
new file mode 100644
index 0000000..07edf54
--- /dev/null
+++ b/app/js/utils.js
@@ -0,0 +1,4 @@
+export const constructStylesheet = (styles, stylesheet = new CSSStyleSheet()) => {
+  stylesheet.replaceSync(styles)
+  return stylesheet
+}
\ No newline at end of file
diff --git a/rollup.config.js b/rollup.config.js
index 067bd8a..0e69ee3 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -16,7 +16,7 @@ const devConfig = {
     resolve(),
     importHTTP(),
     postcss({
-      inject:  false,
+      inject: false,
     }),
   ],
   watch: {
@@ -35,7 +35,8 @@ const prodConfig = {
     resolve(),
     importHTTP(),
     postcss({
-      extract: true,
+      extract: false,
+      inject: false,
       minimize: { preset: 'default' },
     }),
     terser(),