feat: adds support for specifying element type

2 files changed, 7 insertions, 8 deletions

diff --git a/examples/api/style.css b/examples/api/style.css
index c948f59..cdf4559 100644
--- a/examples/api/style.css
+++ b/examples/api/style.css
@@ -1,5 +1,5 @@
 body {
-  --cssx-children: load-btn output-container;
+  --cssx-children: button#load-btn output-container;
 }
 
 #load-btn {
diff --git a/src/index.ts b/src/index.ts
index 2d6e9b8..7e73cf5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -91,18 +91,17 @@ const manageElement = async ($element: Element) => {
   const childrenIds = getChildrenIds($element)
 
   if (childrenIds.length > 0) {
+    const LAYER_CLASS = 'cssx-layer'
     const $childrenRoot =
-      $element.querySelector(':scope > .cssx-layer') ??
-      Object.assign(document.createElement('div'), {
-        className: 'cssx-layer',
-      })
+      $element.querySelector(`:scope > .${LAYER_CLASS}`) ??
+      Object.assign(document.createElement('div'), { className: LAYER_CLASS })
     $element.appendChild($childrenRoot)
 
-    for (const id of childrenIds) {
-      // TODO: Allow adding node types other than div
+    for (const childId of childrenIds) {
+      const [tag, id] = childId.split('#')
       const $child =
         $childrenRoot.querySelector(`:scope > #${id}`) ??
-        Object.assign(document.createElement('div'), { id })
+        Object.assign(document.createElement(tag || 'div'), { id })
       $childrenRoot.appendChild($child)
       await manageElement($child)
     }