Angular Elements vs. Web Components

How can we use Angular Elements with our own projects. How does Angular Elements work across web component boundaries? Can we still use Injection, Content Projection and Querying the same way in Angular Elements ?

Visit the deployed version for my insights.

Summary

• Stick to the native Shadow DOM standard. This means use <slot></slot> and not <ng-content></ng-content> for example.
• You can't use @ContentChildren and friends to query your content. Use (slotchanged) and query for your other components with vanilla JS (querySelector, querySelectorAll)
• I think you won't be able to work across web component boundaries as easy as you work across component boundaries in Angular. Your existing components like Dropdown or Tabs could require a heavy refactoring so they can live in both worlds. (Those are components that usually have children that are tightly bound to their parent)
• If you want to extend native elements you're better off with ditching Angular and create native classes and register them with your web component.

Questions

Smoketest — does it work at all?

Let's test the basic principle of converting an Angular component to a web component.

Content Projection

We have <slot> in Shadow DOM standard V1, <content> in V0 and <ng-content>in Angular. How does this play together?

Content Querying

This is related to 2) Content Projection. How can we query our elements ? @ContentChildren vs. assignedSlots. Do we have to choose or will Angular help us converting our queries to the web component world?

Native Elements

Can we extend native elements like input or button ?

Dependency Injection (TODO)

A smoketest for dependency injection would be integrating a service. This is outlined in many blog posts and also the official documentation and works because we pass in the injector. But what about injecting other things. Can we inject the parent element and create loose coupling between parent and its items ? That's a common scheme in Angualr and I wonder how this translates into the web component world.

Change Detection (TODO)

How does CD work in an Angular element? Will it behave more like a OnPush component where bindings are fine and I have to call markForCheck occasionally or do I have to call app.tick frequently ?

References

• https://angular.io/guide/elements
• https://blog.angularindepth.com/inside-ivy-exploring-the-new-angular-compiler-ebf85141cee1
• facebook/create-react-app#3225
• angular/angular#24536
• angular/angular#22515
• https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b
• https://developer.mozilla.org/en-US/docs/Web/CSS/contain
• https://developers.google.com/web/updates/2016/06/css-containment
• https://hayato.io/2016/shadowdomv1/
• https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports
• https://developers.google.com/web/fundamentals/web-components/customelements