dom

A small collection of DOM utilities: HTML string parsing, z-index management, and querying elements across Shadow DOM boundaries.

import { toDOM, zIndexMax, searchElementsAll, searchShadowsAll, getRelativeParents } from '@pim.sk/utils/dom.mjs'

Usage

toDOM( html )

Converts an HTML string into a live DOM Node ready to insert into the document.

'<span class="tag is-success is-medium">Hello DOM</span>'

const el = toDOM('<span class="tag is-success is-medium">Hello DOM</span>')
output.before(el)
output.textContent = ` ${el.tagName} created & inserted before output`

zIndexMax( [root], [selector] )

Scans all matching elements and returns the highest computed z-index + 1. Useful for stacking modals or tooltips safely on top.

const nextZ = zIndexMax()           // scans div, span (default)
const nextZ = zIndexMax(root, "*")  // custom root & selector

searchElementsAll( selector, [root] )

Like querySelectorAll — but also searches inside all attached Shadow DOM trees.

const els = searchElementsAll("p")             // all <p> in document
const els = searchElementsAll("button", root)  // scoped to root

searchShadowsAll( [root] )

Finds all elements that have an attached Shadow Root — recursively, across nested shadows.

const host = document.createElement("div")
document.body.appendChild(host)
host.attachShadow({ mode: "open" }).innerHTML = "<p>inside shadow</p>"

const shadows = searchShadowsAll()
// shadows[0].shadowRoot.querySelector("p").textContent

getRelativeParents( el )

Traverses DOM upward and returns all ancestor elements with position: relative. Also works across Shadow DOM boundaries.

const parents = getRelativeParents( el )
// returns array of positioned ancestor elements