Components don't work well outside of Mustache. However, you could bootstrap "mustache-scope-less" components relatively easily, especially with 2.1. This will be made easier in future releases.
By "mustache-scope-less", I am talking about components who do not read from mustache's scope. Their scope values derive from attribute values on their custom element. Tabs / Panel is a good example of this.
To make something like this work, you'd have to find all custom elements in the page, and create new instances of them with the data found in:
For example:
Tabs = can.Component.extend({ ... })
$(function(){
$("tabs").each(function(el){
new Tabs(el, {
scope: new can.view.Scope({}),
subtemplate: can.view.mustache(el.innerHTML),
options: new can.view.Options({})
}
})
})
However, this will not work if someone wants to .append("<tabs><panel>...</tabs>") later. For this to work, we need hook into document.registerElement AND hook into jQuery's buildFragment for older browsers.
This is on our roadmap. If you're interested in seeing it land soon, join us on Friday's meeting: