Question

I want to use ember with a widget approach (component in isolation), setting rootElement for
Ember Applications, each one with its own router and store (if necessary).

I did an unsuccessful attempt in http://jsfiddle.net/4xWep/2/
Maybe there is an interference issue between router instances.
It has sense this widget approach, with different Applications and Routers?

App1 = Ember.Application.create({
  rootElement: '#app1'
});

App1.ApplicationController = Ember.Controller.extend();
App1.ApplicationView = Ember.View.extend({
  templateName: 'app1-view'
})

App1.Router = Ember.Router.extend({...})

var App2 = Ember.Application.create({
    rootElement: '#app2'
});

App2.ApplicationController = Ember.Controller.extend();
App2.ApplicationView = Ember.View.extend({
  templateName: 'app2-view'
})

App2.Router = Ember.Router.extend({...})

Answer 1

The issue is your two application’s routers conflict using the location.hash to serialize their state.

You cannot have two applications relying on the hash routing persistence strategy in the same page.

I would even say, it seems to me that what you are trying to achieve are not classical ‘widgets’, as they will have complex state (as indicated by the will of routing inside each)…
Certainly you should dig a little more your architecture. Maybe what you need is not two applications, but rather widgets, or on the other hand, several applications, but not rendered directly in the same document.

Maybe this (related?) question will help.