Leaflet: z-index for canvas

Question

Is there a way to control the order of canvas-elements in Leaflet?

If the layers are represented by canvas html-elements, then canvas that will turn out to be in the very top (with max z-index) will block any other canvas underneath. In this case, the order of those layers won't even matter, since eventually all canvas elements are blocked by the very top canvas element that covers the whole map.

If we set preferCanvas option to false in Leaflet, then every feature will be represented by html element(svgs/paths/etc), so we will have thousands of svg's elements in html structure. This way, the ordering (z-index) will start working, but it kills performance since canvas elements are not used anymore, and we have thousands of html-elements instead.

Are there any other options not to use canvas that blocks all layers underneath and at the same time not to create thousands of elements in html? Or maybe any option to use canvas but somehow overcome that issue and make ordering work?

---

Here it is how we set up z-index for the pane: ("order" value comes from a prop of the component):

useMapEffect(
  ({ instance }) => {
    if (order) {
      // A constant so as to not interfere with other built in layers
      const featureLayerStartZIndex = 350;
      const pane = instance.createPane(
        featureLayerContext.featureLayerPaneName
      );
      if (pane) {
        pane.style.zIndex = `${featureLayerStartZIndex + order}`;
      }
    }
  },
  [order]
);

Here you can see how it eventually looks like in the html structure:

Eventually, the only layer that is on the very top will be the interactive one, it will cover the map completely. Other canvas layers won't get any events as if they are static layers.