Re: [w3c/webcomponents] [idea] Allowing custom element registrations on per-shadow-root basis. (#488)

In my opening post, I compared this feature to React. There is also a similar Angular 2 feature: `@Directive`s. We would achieve a similar effect in Angular 2 with some code like this:

```js
import {Component} from 'angular2/core';
import {SomeElement} from './some-element.directive';
@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [SomeElement]
})
export class AppComponent { }
```

where the line `directives: [SomeElement]` specifies a list of "custom elements" (custom elements in Angular can be made with "directives", although directives can be used in other ways than for just creating custom elements) that are available for use within the component. The SomeElement directive might look like this, which you'll notice applies to `<some-element>` elements:

```js
// some-element.directive.js
import {Directive, ElementRef} from 'angular2/core';
@Directive({
    selector: 'some-element' // <some-element>
})
export class SomeElement {
    constructor(el: ElementRef) {
      // do something with `el`, a <some-element> element.
    }
}
```

If you notice the `@Component` has a selector `my-app`. This means that the component applies to `<my-app>` elements.

This concept in Angular 2 provides some form of encapsulation of logic for the use of certain elements. In the example, `<some-element>` is a "custom element" that is scoped (registered) to be used only within the DOM of a `<my-app>` element. This is similar to the idea of registering Custom Elements onto ShadowDOM roots in order to scope where those custom elements are used.

---
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/488#issuecomment-214803554