Drawing order of Leaflet polygon parts (ex. fill vs outlines) in relation to other layers - leaflet

Question

We're building a new application using Leaflet as map displaying framework.
In our current application it's possible to supply the drawing order of specific 'parts' of a layer in relation to the parts of other layers.
Ex.
When the 'fill' of Layer2 is drawn over the 'fill' of Layer1, the 'outlines' of Layer1 can be drawn over the 'fill' of Layer2:
Desired
Normal
Can this be controlled in Leaflet, of do I have to add an extra layer to drawn the outlines of Layer1 over the the fill of Layer2.
EDIT
This is an example of what can be created using the demo code in the answer by 'Falke Design' - so this looks very promising:
EDIT 2
Basically the supplied answer uses two layers (not exactly what I wanted), but this code will be a good alternative.

Answer 1

You can also create a new layer with only borders on a new pane, that is always on top of the normal one:
// create a own pane, that is always on top of the normal drawn shapes
var bordersPane = map.createPane("borders");
bordersPane.style.zIndex = '405';
And then create, after drawing a layer, a new layer with only borders to the new pane:
// copy the latlngs of the drawn layer and create a new layer on the pane "borders" with only a storke
var layer = L.rectangle(e.layer.getLatLngs(),{pane: 'borders', fill: false, color: '#000', interactive: false}).addTo(map);
In the example I used Leaflet-Geoman for drawing:
// create a own pane, that is always on top of the normal drawn shapes
var bordersPane = map.createPane("borders");
bordersPane.style.zIndex = '405';
// add a stroke and a fill color to the drawing option
map.pm.enableDraw('Rectangle',{pathOptions: {fillOpacity: 1, stroke: true, color: '#000', fillColor: 'green'}})
// layer drawn / created event
map.on('pm:create',(e)=>{
// change the color of the drawn layer
e.layer.setStyle({fillColor: 'red'});
// copy the latlngs of the drawn layer and create a new layer on the pane "borders" with only a storke and is not editable or something (pmIgnore)
var layer = L.rectangle(e.layer.getLatLngs(),{pane: 'borders', fill: false, color: '#000', interactive: false, pmIgnore: true}).addTo(map);
// connect the two layers
layer.refLayer = e.layer;
e.layer.refLayer = layer;
// when the drawn layer is changed, change also the border layer
e.layer.on('pm:edit pm:update pm:drag pm:markerdrag',(e)=>{
e.layer.refLayer.setLatLngs(e.layer.getLatLngs())
})
})
https://jsfiddle.net/falkedesign/8owphr26/

Answer 2

The easiest way would be to reduce the opacity of the fill, then you see through it and see the borders:
L.rectangle(latlng,{fillOpacity: 0.5});
//or
layer.setStyle({fillOpacity: 0.5});