Request full support for the Web Components Custom Elements spec in version 1.7

[raviolibhat]

I'm submitting a ...

• bug report
• feature request
• other

Current behavior:
Web Components aim to be a standards based web framework for browsers very soon. The Custom Elements spec within it is crucial. From Custom Elements Everywhere one can see that AngularJS 1.6 passes all basic tests but none of the advanced tests. This feature request is to provide full support in version 1.7 and pass the advanced tests as well.

Expected / new behavior:
Long term support for 1.7 has been announced to extend for three years. Hence a goal in this request is to make the transition from AngularJS 1.7 to Web Components directly possible, instead of an intermediate step to another framework.

Minimal reproduction of the problem with instructions:

AngularJS version: 1.7.0

Browser: [all]

Anything else:

[Narretz]

This would be quite a complex task at this point, because AngularJS misses the possibility to bind to arbitrary attributes / listen to arbitrary events, see https://custom-elements-everywhere.com/

I think @gkalpak knows more about this.

[gkalpak]

It is definitely an interesting feature to consider. I don't think it would be too complicated (I expect most complications to arise around sanitization - if we choose to have it 😉).

It is worth investigating more imo.

BTW, you can implement two basic (somewhat hacky) directives to handle the missing features for you (with somewhat awkward syntax). Basically, you need a way to declaratively bind to arbitrary properties:

// Usage:
// ```html
// <!-- Bind `$ctrl.bar` to the `foo` property of `<my-element>`. -->
// <my-element ng-prop="foo->$ctrl.bar">
//
// <!-- Bind multiple to properties. -->
// <my-element ng-prop="foo->$ctrl.bar|||baz->$ctrl.qux+'xyz'">
// ```
.directive('ngProp', function ngPropDirective() {
  // Post-link
  return (scope, elem, attrs) => {
    attrs.ngProp.
      split('|||').
      map(x => /^(.+?)->(.+)$/.exec(x).slice(1)).
      forEach(([propName, exp]) => {
        const watchListener = newValue => elem[0][propName] = newValue;
        scope.$watch(exp, watchListener);
      });
  };
}

Then, you also need a way to declaratively listen to arbitrary events:

// Usage:
// ```html
// <!-- Listen to `foo` event and call `$ctrl.onFoo()`. -->
// <my-element ng-on="foo->$ctrl.bar()">
//
// <!-- Pass the event object to the listener. -->
// <my-element ng-on="foo->$ctrl.bar($event)">
//
// <!-- Listen to multiple events. -->
// <my-element ng-on="foo->$ctrl.bar()|||baz->$ctrl.qux = $ctrl.qux + 1">
// ```
.directive('ngOn', function ngOnDirective($parse) {
  // Post-link
  return (scope, elem, attrs) => {
    attrs.ngOn.
      split('|||').
      map(x => /^(.+?)->(.+)$/.exec(x).slice(1)).
      forEach(([eventName, exp]) => {
        const parsedExp = $parse(exp);
        const listener = $event => scope.$apply(() => parsedExp(scope, {$event}));
        elem.on(eventName, listener);
      });
  };
}

Here is a demo.

[mattdsteele]

For reference, the other library I've used to do arbitrary prop bindings: https://github.com/robdodson/angular-custom-elements

[peterblazejewicz]

Hi folks,
I think, if it is added in 1.7 it will help to migrate core features of existing apps into platform/library agnostic, standard compliant solution. I could imagine of porting part of UI into custom elements and later use them in any other application.
Thanks!