Highlight custom element


I wrote myself a customRenderer and adjusted the look of some elements.
Depending on how I do that the highlighting (green/red) for validation of new connections works/doenst.

For example:

drawShape = function (parentNode, element) {
} else if (element.type === "bpmn:Task") {
      return this.drawCustomTask(parentNode, element);
drawCustomTask = function (parentNode, element, url) {
    const shape = drawRect(
    shape.style.setProperty("stroke", "green");
    if (url !== undefined) {
      let Gfx = svgCreate("image", {
        x: 5,
        y: 5,
        width: 16,
        height: 16,
        href: url,

      svgAppend(parentNode, Gfx);
    this.renderEmbeddedLabel(parentNode, element, "center-middle");
    return shape;

In the case of bpmn:task I dont insert a gif and only color the stroke green.
If Iconnect to this element:
Screenshot (83)
The element gets highlighted and everything works fine.

However in other cases i want to add custom SVG’s, therefor:

drawShape = function (parentNode, element) {
} else if (element.type === "bpmn:StartEvent") {
      return this.drawCustomFlowNode(parentNode, element, 'someSvgLink');
drawCustomFlowNode = function (parentNode, element, url) {
    let ExclusiveGatewayGfx = svgCreate("image", {
      x: 0,
      y: 0,
      width: element.width,
      height: element.height,
      href: url,

    svgAppend(parentNode, ExclusiveGatewayGfx);

    return ExclusiveGatewayGfx;

With the following result:
Screenshot (82)
The connection is not valid and gets cancelled however there is no highlighting.
Is it because i “set” my SVG on top of the shape? If so is there a way to still highlight elements like this?

Like always thanks for your help!

Found a decent solution, however i still have a follow-up question.

Styling the element directly wasnt working for me with the API modeling.setColor so i used css and markers just like in the color example, Option #3:

Styling the element directly had no effect so i used:
outline: 3px solid red;
outline-offset: 4px;
This achieved:
Screenshot (18)

Which is fine for us. If anybody had a suggestion how to remove the dotted blue line because of the selection, go ahead. I would appreciate it.

As events i used:

modeler.on("connect.hover", 5000, function (event) {
		const source = event.context.start,
			target = event.hover;
		if (!isEventOrGateway(target)) return;

		if (
			modeler.get("rules").allowed("connection.create", {
				source: source,
				target: target,

		modeler.get("canvas").addMarker(target.id, "validateConnection");
	modeler.on("connect.out", 5000, function (event) {
		if (coloredElements.length > 0) {
			coloredElements.forEach((element) => {
				modeler.get("canvas").removeMarker(element.id, "validateConnection");
				coloredElements = coloredElements.filter((changedElement) => changedElement != element);

If you dont use svg’s on top of the shapes just use the modeling.setColour API instead of markers.
Except for the dotted line i have one last problem though. What is the right event for creation canceld?
As you can see i remove the marker if i move out of the element. However if i release the mouse and
the connection gets cancelled it stays.
Cant seem to find the event “connection.end.canceled”, something like that.

Hope this helps somebody and if you have an idea thanks for your help!