Namespacing Web Components

## Namespaced Web Components

One of the biggest problems working with Angular.js, Ember, and Web Components is that by nature each component is essentially a global token. I am concerned with this direction especially when it comes to web components and would like to open some discussion to resolve the problem. 

Globals are globals, that is as true in declarative code as it is in imperative code. In a large application it is not unlikely for two disparate developers on completely different teams to register a component called 'tooltip'. When loaded into the same page the last component wins, overriding the original component. It is even more prevalent when wanting to use third party code which enforce certain names.

In our application, using angular directives, this happens *all the time*.

One proposal would be to adopt the import syntax from JavaScript ES6.

```html
<link rel="import" href="/imports/heart.html" as="my-heart" />
```

These could be scoped based upon where they exist in the document tree, so in the case that one might want to namespace for different parts of the document.

```html
<div id="some-app">
  <link rel="import" href="/imports/heart.html" as="my-heart" />
</div>

<!-- my-heart in here is different than the my-heart in some-app -->
<div id="other-app">
  <link rel="import" href="/imports/my-heart.html" />
</div>
```

Another approach would be to scope the imports using CSS selectors.

```html
<!-- my-heart can only used under elements that match the for selector -->
<link rel="import" href="/imports/my-heart.html" for="#some-app" />
```

https://gist.github.com/iammerrick/5826778

(Sorry if repost.)