Label for a custom rendered element

I have successfully rendered the “Task” element with custom svg using this snippet in CustomRenderer:

  this.canRender = function(element) {
    return is(element, 'bpmn:Task');
  this.drawShape = function(parent, shape) {
    var url = Workorder.dataURL;

    var workorder = svgCreate('image', {
      x: 0,
      y: 0,
      width: shape.width,
      height: shape.height,
      href: url

    svgAppend(parent, workorder);

    return workorder;

But this has caused a problem. It’s not possible to add label to Tasks anymore. Can you please help me fix this?

any thoughts please?

@nikku Can you please help me on this problem?

Could you please share a CodeSandbox that reproduces your issue in a way that we can inspect it?

it’s basically a clone of the Nyan example. Except that I use my custom svg instead of Nyan.gif.
Now, the problem is that the label of this element is not shown. I want it to be viewable just like the labels on a Task Element. It’s possible to add or edit the label (it’s even accessible via businessObject), but the DOM responsible for showing the label will not be generated.

Still no idea? I’m really stuck here. Any help is much appreciated

@nikku @Niklas_Kiefer I would appreciate it if you can help me on this problem

Thanks for following up with the sandbox.

What you need to do is render the embedded label as part of the render process, cf. BpmnRenderer.

The BpmnRenderer wraps that into a little bit of utility, but what it does in a nutshell is resorting to TextRenderer for creating the actual label text and adding it to the graphical element.