Web Components Feedback

Feedback.md

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.

<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.

<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.

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

I dig the as="...".

+1 for the "as." Although Angular encourages devs to prefix their directives (essentially namespacing them) this is a better option and doesn't rely on component authors to choose a unique name.

@geddski how does as= work since imports can have multiple elements in them.

@wycats You are right, I didn't consider that multiple components could be loaded. I just want the ability to scope, maybe even rename. :-) Maybe "prefix". I dunno. Something.

Where this breaks down is trying to say that within a subtree, the same element name means something else (maps to a different class), as in your second example.

That breaks basically the entire model of DOM nodes that can be moved around while retaining their identity, CSS selector matching, cloning, innerHTML, document.createElement, ....