Layer is now responsible of its rendering

src/ol/layer/Layer.js

@@ -172,6 +172,20 @@ class Layer extends BaseLayer {
     this.changed();
   }
 
+  /**
+   * In charge to manage the rendering of the layer. One layer type is
+   * bounded with one layer renderer.
+   * @param {?import("../PluggableMap.js").FrameState} frameState Frame state.
+   * @return {HTMLElement} The rendered element.
+   */
+  render(frameState) {
+    const layerRenderer = this.getRenderer();
+    const layerState = this.getLayerState();
+    if (layerRenderer.prepareFrame(frameState, layerState)) {
+      return layerRenderer.renderFrame(frameState, layerState);
+    }
+  }
+
   /**
    * Sets the layer to be rendered on top of other layers on a map. The map will
    * not manage this layer in its layers collection, and the callback in

src/ol/renderer/Composite.js

@@ -96,11 +96,7 @@ class CompositeMapRenderer extends MapRenderer {
       }
 
       const layer = layerState.layer;
-      const layerRenderer = this.getLayerRenderer(layer);
+      this.children_.push(layer.render(frameState));
-      if (layerRenderer.prepareFrame(frameState, layerState)) {
-        const element = layerRenderer.renderFrame(frameState, layerState);
-        this.children_.push(element);
-      }
     }
 
     replaceChildren(this.element_, this.children_);