diff options
| -rw-r--r-- | examples/api/style.css | 2 | ||||
| -rw-r--r-- | src/index.ts | 13 |
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) } |