how to convert HtmlElement to HtmlTag？

[cyz1901]

hi all. I am a beginner in functional programming. I have a question.
I have a function. It contains a val canvas Resource and i hope use classname in div using this val canvas

this is my code

def renderWebGL(): Resource[IO, HtmlElement[IO]] = {
    val webglCanvans: Resource[IO, HtmlCanvasElement[IO]] = Resource
      .eval(
        IO {
          val sw = window.screen.width
          val sh = window.screen.height

          val scene = Scene()
          val camera = PerspectiveCamera(75, sw / sh, 0.1, 1000)
          camera.position.z = 5

          // add object
          val geometry =
            BoxGeometry(
              1,
              1,
              1,
              js.undefined,
              js.undefined,
              js.undefined
            )
          val material =
            MeshBasicMaterial.apply(
              MeshBasicMaterialParameters.apply().setColor(0xff000)
            )
          val mesh = Mesh(geometry, material)
          val cube = mesh.asInstanceOf[Object3D[Object3DEventMap]]
          scene.add(cube)

          // add light
          val light = DirectionalLight(0xffffff, 0.5)
          light.position.set(0, 0, 5)
          scene.add(light)

          val renderer = new WebGLRenderer()
          renderer.setSize(sw, sh)
          renderer.render(scene, camera)
          val canvas = renderer.domElement
          canvas.asInstanceOf[HtmlCanvasElement[IO]]
        }
      )

    div(
      webglCanvans(
        cls := "w-[100%] h-[100%]"
      ),
      div(
        cls := " bg-red-800 w-[100px] h-[100px] left-[50px] top-[50px] z-10 absolute"
      )
    )
  }

and i found this error

[error] 65 |      webglCanvans(
[error]    |      ^^^^^^^^^^^^
[error]    |      value webglCanvans does not take parameters
[error]    |
[error]    | longer explanation available when compiling with `-explain`
[error] one error found
[error] (frontend / Compile / compileIncremental) Compilation failed

it seem i should use

 div(
   webglCanvans,
   div(
     cls := " bg-red-800 w-[100px] h-[100px] left-[50px] top-[50px] z-10 absolute"
   )
 )
}

but i want to add classname in this section.....

[armanbilge]

Try like this:

webglCanvans.flatTap(_.modify(cls := "w-[100%] h-[100%]"))

You cannot convert an HtmlElement to an HtmlTag, so instead the modify syntax is used to modify it post-facto.

calico/calico/src/main/scala/calico/syntax.scala

Line 36 in 0ef4f21

inline def modify[F[_], A](a: A)(using m: Modifier[F, E, A]): Resource[F, Unit] =

[cyz1901]

thank you so much