From ef3b84a842d2958170a16a1f05b5affe99aa04b5 Mon Sep 17 00:00:00 2001
From: Matthias Hertel <mathertel@hotmail.com>
Date: Sat, 15 Feb 2025 17:54:40 +0100
Subject: [PATCH] refactor: improve custom element definition and handling of
 'for' attribute

---
 sfc/loader.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/sfc/loader.js b/sfc/loader.js
index 461435e..62e8e3f 100644
--- a/sfc/loader.js
+++ b/sfc/loader.js
@@ -63,7 +63,7 @@ class UComponent extends HTMLElement {
       }
     });
 
-    if (document.readyState == 'loading') {
+    if (document.readyState === 'loading') {
       window.addEventListener('DOMContentLoaded', this.init.bind(this));
     } else {
       window.requestAnimationFrame(this.init.bind(this));
@@ -134,8 +134,19 @@ window.loadComponent = (function() {
     // make template and style available to object constructor()
     def.uTemplate = dom.querySelector('template');
     def.uStyle = dom.querySelector('style');
-    customElements.define(tagName, def);
-    console.debug('SFC', `${tagName} defined.`);
+    def.for = scriptObj.getAttribute('for');
+
+    if (def.for) {
+      customElements.define(tagName, def, { extends: def.for });
+      if (def.uStyle) {
+        document.head.appendChild(def.uStyle.cloneNode(true));
+      }
+      console.debug('SFC', `${def.for}.${tagName} defined.`);
+
+    } else {
+      customElements.define(tagName, def);
+      console.debug('SFC', `${tagName} defined.`);
+    }
   }; // fetchSFC()
 
 
@@ -146,3 +157,5 @@ window.loadComponent = (function() {
 
   return loadComponent;
 }());
+
+// EOF
\ No newline at end of file