Bind the "role" attribute of svg element is not work

[XuJinNet]

I have a custom element responsible for rendering svg icon, i bind the "role" atrribute for the svg element, but it not work, the bind for other bindable attributes is work fine.

View Model

import {containerless, bindable} from 'aurelia-framework';

@containerless()
export class AnImgCustomElement {
    @bindable role;
    @bindable styleClass;
    @bindable style;
    @bindable href;
    @bindable title;
}

View

<template>
    <svg role.bind="role" class.bind="styleClass" style.bind="style">
        <title if.bind="title">${title}</title>
        <use xlink:href.bind="href"></use>
    </svg>
</template>

Use

<an-img role="img" href="images/resources-bundle.svg#${navModel.config.name | dashCase}" title="${navModel.title}"></an-img>

Output

<svg role.bind="role" class.bind="styleClass" style.bind="style" class="au-target" au-target-id="1">
        <title>消息</title><!--anchor-->
        <use xlink:href.bind="href" class="au-target" au-target-id="4" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/resources-bundle.svg#message"></use>
</svg>

The role "img" is not set to the svg element.

[jdanyow]

@XuJinNet please setup a reproduction using the aurelia gist: https://gist.run/?id=7542e061bc940cde506b

[XuJinNet]

@jdanyow thank you.
https://gist.run/?id=b3b1198cc186279317353025915caa1b

[jdanyow]

@XuJinNet try using xlink:role.bind="role" instead. Take a look at the svg element using the dev tools after making that change- you should see the "role" attribute.

[jdanyow]

@XuJinNet in the next release, role.bind="..." will work

[XuJinNet]

Awesome!
Thank you @jdanyow 👍