Prevent component from rendering input attributes

I have a my-tag component that simply renders a title:

html

<div id="content"></div>

<script id="main-template" type="text/mustache">
    <my-tag title="This is the title"></my-tag>
</script>

javascript

var Component = can.Component.extend({
    tag: 'my-tag',
    template: '<h1>{{title}}</h1>',
    viewModel: {
        title: '@'
    }
});

$('#content').html(can.view('main-template', {}));

output

<div id="content">
    <my-tag title="This is the title">
        <h1>This is the title</h1>
    </my-tag>
</div>

I would like to have the output as follows:

<div id="content">
    <my-tag>
        <h1>This is the title</h1>
    </my-tag>
</div>

How can I get the component to not render the title attribute in my-tag?

Here is the jsfiddle.

You can't prevent it from rendering, however, you might be able to remove it after the component is created like:

var Component = can.Component.extend({
    tag: 'my-tag',
    template: '<h1>{{title}}</h1>',
    viewModel: {
        title: '@'
    },
    events: {
      init: function(){
        this.element.removeAttr("title");
      }
    }
});

Also, if you are starting a new CanJS project, I'd encourage you to switch to can.stache as that will be the default templating engine in 3.0. It's highly compatible with can.mustache.