What replaces the old HTMLElement.style when using the new Fable.Browser.Dom

Question

I started a project with fulma-demo and tried transplanting some code from another sample project which used an older version of Fable and Fulma. It has the following line which will not compile:

testWrapper.style.borderColor <- "#E95D0F"

Evidently the style property no longer exists on HTMLElement. What replaces it?

Edit:

open Fable.Core.JsInterop
open Browser
open Browser.Types
let testWrapper = document.querySelector(".test-wrapper")  :?> HTMLElement

Answer 1

with the release of Fable.Core v3, Alfonso started to rework several "historical" packages like Fable.Import.Browser.

It's possible you haven't noticed but many Fable libraries have a dependency to the monstrous Fable.Import.Browser package, a single file of more than 12000 lines that most IDEs struggled to open. This file was automatically generated in its origin using ts2fable from Typescript definitions. It also contained manual tweaks however, and this together with its size made it very difficult to update.

Quotes from Fable blog

So Fable.Import.Browser has been splitted in several packages:

• Fable.Browser.Blob
• Fable.Browser.Dom
• Fable.Browser.Event
• Fable.Browser.Performance
• Fable.Browser.Url
• Fable.Browser.WebSocket
• Fable.Browser.WebStorage
• Fable.Browser.XMLHttpRequest

However, it is still missing Fable.Browser.Svg and Fable.Browser.Css. I already have a version for Fable.Browser.Svg and I am working on making a version of Fable.Browser.Css so hopefully they will soon be available to use.

That said, if you need to access the style property of an element right now, you will need to use dynamic typing:

open Fable.Core.JsInterop
open Browser
open Browser.Types

let testWrapper = document.querySelector(".test-wrapper")  :?> HTMLElement

testWrapper?style?borderColor <- "#E95D0F"