feat: show error when has styles & not using shadow roots

package.json

@@ -78,7 +78,7 @@
   "size-limit": [
     {
       "path": "./dist/WebComponent.js",
-      "limit": "1.1 KB"
+      "limit": "1.2 KB"
     },
     {
       "path": "./dist/html.js",

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
+        )
+      }
   }
 }