Re: Namespacing Components

On Fri, Jun 21, 2013 at 6:32 AM, <merrick.christensen@gmail.com> wrote:

> ## 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.
>
> I agree that this is a 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>
> ```
>
> I don't think this is a workable solution because if an element is moved
to a different part of the tree, what if that name is not available in that
scope? It has to have *some* name. Similarly, many elements start life from
document.createElement. What scope is that associated with? You would have
to work hard to define what happens as a result.

The cure might be worse than the disease.

> 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" />
> ```
>
> I think that this suffers from similar problems.


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



-- 
<http://goto.google.com/dc-email-sla>