How can I dynamically apply different visual representation for the same Element in JointJS

Question

I defined a model, lets call it

export enum TheState {
    CLOSED = "CLOSED", OPENED = "OPENED", CLOSING = "CLOSING", OPENING = "OPENING"
}

export class StatefulElement extends dia.Element {

    get state() {
        return this.prop('state') as TheState
    }

    set state(state: TheState) {
        this.prop('state', state)
    }

    public updateStateAttr() {
        const currentState = this.state;
        const isOpeningOrClosing = currentState === TheState.OPENING || currentState === TheState.CLOSING
        this.attr('stateOpened/fill', currentState === TheState.OPENED ? colorStateOpened : 'none')
        this.attr('stateIntermediate/fill', isOpeningOrClosing ? colorStateIntermediate : 'none')
    }

    // the other stuff, like defaults, markup...

} 

I would now like to easily map different Views onto this model and easily switch between the views programmatically.

Imagine e.g. that the view could be rendering

• a door
• a light bulb
• an abstraction like a colored rectangle

I am struggling to find an approach to reuse the same semantic model that fits with the JointJS lib intention.

• It might be working to dynamically exchange the model markup and attrs, but I am not sure, if this is the intended usage for the library.
• It feels a bit wrong to fiddle with the model, when I actually want to only change its visual representation. So I thought, maybe I could dynamically swap out stuff in the view
• Or, if the representations would be provided as SVG files following some conventions to include the same selectors, maybe I could somehow refresh the views $el and el?

What is the right path to do such a thing with JointJS?