Fair enough, what do you propose as a solution, perhaps applying some sort of scoped attribute to indicate something is scoped to a subtree? Glad to hear you agree it is a problem. :-)
M On Jun 24, 2013, at 9:10 AM, Dominic Cooney <[email protected]> wrote: > On Fri, Jun 21, 2013 at 6:32 AM, <[email protected]> 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 > > > > --
