Use a CustomAttribute to replace elements entire content - Aurelia

Question

I'm currently using a customAttribute on a <th> to add column ordering to a table.

I've achieved this by using the following in my Custom Attribute VM;

import {bindable, inject, observable, Container, ViewEngine, ViewSlot, bindingMode} from 'aurelia-framework';

@inject(Element, Container, ViewEngine)
export class OrderCustomAttribute {
    @bindable key;
    @bindable @observable orderBy;
    @bindable @observable orderDirection;
    myDirection = false;

    constructor(Element, Container, ViewEngine){
        this.element = Element;
        this.viewEngine = ViewEngine;
        this.container = Container;
    }

    attached() {
        this.viewEngine.loadViewFactory('components/datatable/attributes/order.html').then(factory => {

            const childContainer = this.container.createChild();
            const view = factory.create(childContainer);

            view.bind(this);
            const vs = new ViewSlot(this.element, true);
            vs.add(view);

            this.updateCaret();
        });
    }

    order() {
        if(this.key == this.orderBy) {
            // We're already ordering by this column, so move the order on one;
            if(!this.orderDirection) {
                this.orderDirection = "ASC";
            } else if(this.orderDirection == "ASC") {
                this.orderDirection = "DESC";
            } else {
                this.orderDirection = false;
                this.orderBy = false;
            }
        } else {
            // We're not ordering by this column, so lets start doing so
            this.orderBy = this.key;
            this.orderDirection = "ASC";
        }
    }

    orderByChanged(newValue, oldValue) {
        this.updateCaret();
    }

    orderDirectionChanged(newValue, oldValue) {
        this.updateCaret();
    }

    updateCaret() {
        if(this.key == this.orderBy) {
            this.myDirection = this.orderDirection;
        } else {
            this.myDirection = false;
        }
    }
}

And my simple View;

<template>
    <a class="order__icon" click.delegate="order()">
        <i class="fa fa-caret-down" show.bind="myDirection == 'DESC'"></i>
        <i class="fa fa-caret-up" show.bind="myDirection == 'ASC'"></i>
        <i class="fa fa-caret-up text-muted" show.bind="!myDirection"></i>
    </a>
</template>

I've already written the straightforward logic to sort the data when the sort icon is clicked.

The issue I'm having is I want the whole of the column heading to be a link, not just the icon. The code above adds my CustomAttribute VM into the element. Is there a way I can;

1. Get the contents of the element (so, the column name)
2. Use these contents in my View
3. Replace the contents of the element with my view (rather than appending my view into the element)