inlining raw html

[fradav]

For inserting raw html, I don’t like the way it is built into the tags bindings, with innerHTML function, because it adds an unecessary node in the dom.
I looked for how to do that real "raw" html insert in solid and I found this : solidjs/solid#918

I tried to reproduce it with Oxpecker bindings : 

namespace Oxpecker.Solid

open Fable.Core
open Oxpecker.Solid
open Browser.Types

[<AutoOpen>]
[<Erase>]
type Bindings =

    [<Import("template", "solid-js/web")>]
    static member solidTemplate(t: string, ?n: int) : HTMLElement = jsNative


[<AutoOpen>]
module Tags =

    [<SolidComponent>]
    let RawNode (node: Node) : HtmlElement =
        let mutable el: Node = Unchecked.defaultof<_>
        onMount (fun () -> el.parentNode.replaceChild (node, el) |> ignore)
        template().ref (fun e -> el <- e)

    [<SolidComponent>]
    let RawHtmlNode (t: string) : HtmlElement =
        (solidTemplate t).cloneNode true |> RawNode

It works as is, but is there is a better, more cleaner approach than direct dom manipulation ?

[Lanayx]

@fradav as Oxpecker.Solid is a Solid.js wrapper, all it's benefits and quirks are in place, so workarounds are also the same :) I personally use innerHTML everywhere and additional dom node doesn't get in a way.

[fradav]

You’re right, in fact just div(class'="contents", innerHTML=rawString) does the job. The tailwindcss class contents (which translates as display: contents), does exacly that, putting a “shadow” node as parent.