How to set custom width and height for <cropper-selection> ?

[webmix]

Hello,

According to the documentation, we need this to set a custom size for the <cropper-selection> :
Use the element's x, y, width, and height properties.

I am not sure actually how to set those options, here is my code, which works so far regarding the cropping.
But the attributes x, y, height and width are not doing anything, my <cropper-selection> area always remain the same, with half of the canva size as values.

import { Controller } from "@hotwired/stimulus";
import Cropper from "cropperjs";

export default class extends Controller {
  static targets = ["image", "data", "result"];

  connect() {
    this.cropper = new Cropper(this.imageTarget, {
    });

    const cropperSelection = document.querySelector("cropper-selection");
    if (cropperSelection) {
      cropperSelection.setAttribute("x", 10);
      cropperSelection.setAttribute("y", 10);
      cropperSelection.setAttribute("width", 10);
      cropperSelection.setAttribute("height", 10);
      cropperSelection.movable = false;
      cropperSelection.resizable = false;
    }

    const cropperCanva = this.cropper.getCropperCanvas();
    if (cropperCanva) {
      cropperCanva.style.minHeight = '400px';
      cropperCanva.style.width = '400px';
    }
  }

  crop() {
    const cropperSelection = document.querySelector("cropper-selection");
    cropperSelection.$toCanvas().then((croppedCanvas) => {
      if (!croppedCanvas) {
        console.error("Error : `$toCanvas()` failed.");
        return;
      }
      this.resultTarget.innerHTML = "";
      this.resultTarget.appendChild(croppedCanvas);
    }).catch((error) => {
      console.error("Error:", error);
    });
  }
}

Note that those options are working correctly :

      cropperSelection.movable = false;
      cropperSelection.resizable = false;

I've also tried those variants, with no better results :

const cropperSelection = document.querySelector("cropper-selection");
    if (cropperSelection) {
      cropperSelection.x = 10;
      cropperSelection.y = 10;
      cropperSelection.width = 10;
      cropperSelection.height = 10;
      cropperSelection.movable = false;
      cropperSelection.resizable = false;
    }

and using pixels gives unstable results about the selection area, and disables cropperSelection.resizable = false;

    const cropperSelection = document.querySelector("cropper-selection");
    if (cropperSelection) {
      cropperSelection.x = "10px";
      cropperSelection.y = "10px";
      cropperSelection.width = "50px";
      cropperSelection.height = "50px";
      cropperSelection.movable = false;
      cropperSelection.resizable = false;
    }

I am actually not sure I am using the lib in a correct way.
Help is much welcome :)

Thanks !

[webmix]

Answering myself, if that can be any useful to anyone, I found the issue.

I had to remove the attribute initial-coverage which was actually setting the position

    const cropperSelection = document.querySelector("cropper-selection");
    if (cropperSelection) {
      cropperSelection.removeAttribute("initial-coverage")
      cropperSelection.x = 20;
      cropperSelection.y = 70;
      cropperSelection.width = 100;
      cropperSelection.height = 100;
      cropperSelection.movable = false;
      cropperSelection.resizable = false;
    }