From 20c716d78db02e52571334c1a9d5472a1b0b3a38 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Sun, 30 Mar 2025 12:46:43 +0200
Subject: [PATCH] feat: show error when has styles & not using shadow roots

---
 package.json        |  2 +-
 src/WebComponent.js | 20 ++++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d9a47ab..9d3d592 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
   "size-limit": [
     {
       "path": "./dist/WebComponent.js",
-      "limit": "1.1 KB"
+      "limit": "1.2 KB"
     },
     {
       "path": "./dist/html.js",
diff --git a/src/WebComponent.js b/src/WebComponent.js
index aba6780..95075e2 100644
--- a/src/WebComponent.js
+++ b/src/WebComponent.js
@@ -28,6 +28,7 @@ export class WebComponent extends HTMLElement {
    */
   static props
 
+  // TODO: support array of styles
   static styles
 
   /**
@@ -203,9 +204,20 @@ export class WebComponent extends HTMLElement {
   }
 
   #applyStyles() {
-    const styleObj = new CSSStyleSheet()
-    styleObj.replaceSync(this.constructor.styles)
-    console.log(this.constructor.styles, this.constructor.props)
-    this.#host.adoptedStyleSheets = [...this.#host.adoptedStyleSheets, styleObj]
+    if (this.constructor.styles !== undefined)
+      try {
+        const styleObj = new CSSStyleSheet()
+        styleObj.replaceSync(this.constructor.styles)
+        console.log(this.constructor.styles, this.constructor.props)
+        this.#host.adoptedStyleSheets = [
+          ...this.#host.adoptedStyleSheets,
+          styleObj,
+        ]
+      } catch (e) {
+        console.error(
+          'ERR: Constructable stylesheets are only supported in shadow roots',
+          e
+        )
+      }
   }
 }