New highlighter can be defined by extending the joint.dia.HighlighterView base class.

// A simple highlighter, which draws a rectangle over the entire CellView
const MyHighlighter = joint.dia.HighlighterView.extend({

    tagName: 'rect',

    attributes: {
        'stroke': 'blue',
        'fill': 'blue',
        'fill-opacity': 0.1,
        'pointer-events': 'none'
    },

    options: {
        padding: 5
    },

    // Method called to highlight a CellView
    highlight(cellView, _node) {
        const { padding } = this.options;
        const bbox = celView.model.getBBox();
        // Highlighter is always rendered relatively to the CellView origin
        bbox.x = bbox.y = 0;
        // Increase the size of the highlighter
        bbox.inflate(padding);
        this.vel.attr(bbox.toJSON());
    },

    // Method called to unhighlight a CellView
    unhighlight(_cellView, _node) {
        // Cleaning required when the highlighter adds
        // attributes/nodes to the CellView or Paper.
        // This highlighter only renders a rectangle.
    }

});

MyHighlighter.add(el1.findView(paper), 'root', 'my-custom-highlighter', {
    layer: 'front', // "layer" is an option inherited from the base class
    padding: 10
});