How to connect a link to a sub element of a custom shape with jointjs

I have a custom shape composed of a body (a SVG path) and a label.
I want my links from one shape to another to be connected to the center of the body sub-element, and not the center of the bbox of the shape.
I tried to set a connectionPoint with a selector to the body, but it does not work. My best approach is to add sticky: true to force the link to point to the body, but this is not satisfying. You can see in this CodePen with the source shape having sticky: true and the target shape having sticky: false.

Any help to make my link point to the center of my body element would be really appreciated.

You can use the magnetSelector attribute seen in the docs. magnetSelector designates a sub-element as the target for the cell's magnet.

The following seems to work well in your codepen:

const shape1 = new Shape();
shape1.position(100, 100);
shape1.attr({ label: { text: "Shape 1" } });
shape1.addTo(graph);

const shape2 = new Shape();
shape2.position(500, 100);
shape2.attr({ label: { text: "Shape 2" } });
shape2.addTo(graph);

shape1.attr(['root','magnetSelector'], 'body');
shape2.attr(['root','magnetSelector'], 'body');