XPath Navigation in cDOM

Navigate and derive element properties from the existing DOM structure.

🚨

cDOM vs JPRX

Static XPaths are availbale to cDOM during the construction phase, whereas JPRX has an xpath helper that returns a computed signal. See JPRX documentation on the helper for more info about xpath and reactivity.

Overview

cDOM allows elements to derive their properties from the existing DOM tree. This can be done statically for one-time setup or reactively for values that change over time.

Static XPath (# prefix): Available to cDOM. Evaluated once during DOM construction.
Reactive XPath (=xpath() helper): Available to JPRX. Evaluates as an expression and returns a computed signal.

Static XPath (`#` prefix)

Static XPath expressions are perfect for keeping your definitions DRY (Don't Repeat Yourself). By referencing values like id or class from parent elements, you avoid duplicating data in your cDOM structure.

Live Interactive Example

await import('/lightview-cdom.js');
const { parseJPRX, hydrate } = globalThis.LightviewCDOM;
const { $ } = Lightview;

const cdom = `{
    div: {
        id: "profile-container",
        class: "card",
        "data-theme": "dark",
        children: [
            { h3: "User Profile" },
            { button: { 
                id: "7", 
                // XPath #@id gets "7" from this button's id
                // XPath #../@id gets "profile-container" from the parent div
                children: ["Button ", #@id, " in section ", #../@id] 
            }}
        ]
    }
}`;

$('#example').content(hydrate(parseJPRX(cdom)));

Allowed Axes (Backward-Looking Only)

To maintain high performance and safety during construction, cDOM only allows backward-looking XPath axes. You can reference nodes that are already constructed (parents, ancestors, earlier siblings).

Axis	Result
`self::` / `.`	The current node.
`parent::` / `..`	The parent element.
`ancestor::`	Higher-level ancestors.
`preceding-sibling::`	Elements that appear before the current one in the same parent.

Forbidden: child::, descendant::, and following:: axes are disabled as they could create infinite loops or reference nodes that do not exist yet.

Reactive XPath (`=xpath()`)

If you need an XPath expression to update reactively if attributes elsewhere in the DOM change, use the =xpath() helper within a JPRX expression.

{
    div: {
        title: "=xpath('../@data-section')",
        class: "=concat('item ', xpath('../@theme'))"
    }
}

Concise cDOM (cDOMC) Support

In cDOMC (the shorthand format used in .cdomc files), the parser is structurally aware of XPath expressions. You do not need to quote them even if they contain square brackets or spaces.

// Clean unquoted syntax in .cdomc files
{ 
    button: { 
        id: "7", 
        children: [#../@id] 
    } 
}

// Support for complex paths with predicates
{ span: [#ancestor::div[@data-role='container']/@title] }

Security & Safety

XPath navigation in cDOM is inherently safer than using arbitrary JavaScript for DOM traversal. It provides a restricted, read-only view of the existing structural tree without the risks of code injection or side effects.