Accessing and tweaking Dom elements (maybe related to type conversion?)

The DOM types that ship with the compiler are pretty bare bones, but here’s a couple of suggestions to make it a bit easier:

1. You can use JsxDOMStyle.t instead of Dom.cssStyleDeclaration to get a fully typed style object.
2. You could just assume nodeList contains only htmlElements in your forEach binding, or if you want more flexibility, add a generic nodeListOf type, similar to what TypeScript has.

Here’s the equivalent piece of code implementing those two suggestions:

type nodeListOf<'a>
@send external forEach: (nodeListOf<'a>, 'a => unit) => unit = "forEach"

@scope("document") external querySelectorAll: string => nodeListOf<Dom.htmlElement> = "querySelectorAll"
@get external style: Dom.htmlElement => JsxDOMStyle.t = "style"

let trace: 'a. ('a, string) => 'a = (value, msg) => {
  Console.log(msg)
  Console.log(value)
  value
}

let main: unit => unit = () => {
  let elements = querySelectorAll(".abc")
  elements->forEach(el => {
    let style = el->style->trace("converted record ")
    style.zIndex->Console.log
    let style = {...style, zIndex: "1"}
  })
}
main()

Also, on a more technical point, {..} is an object type, not a record type. And your cssStyleToRecord function is not soundly typed, because the returned object type will be inferred from use, that is, it will be assumed to have whichever fields you use from it. You should generally avoid object types. It’s more of a historical artifact.