My experience with Web Components and Angular

As I need to join a project which will use Web Components (Custom Elements) to reuse some components, I took a look about this topic that was pretty new for me. These Web Components will be developed in Angular.

First at all I’m very surprised that in 2021 there’s no standard or off-of-the-box solution to build reusable components.
Second, I’m more surprised that the existing implementation is a draft and not production ready, at least for basic functionality like custom styling of these Custom Elements.

By the way, the idea behind it is pretty simple and it should work without any problems. The problems for me are beginning when you want to export and import them in another project.

As example in Angular is pretty trivial to implement a Web Component/Custom Element, they call them “Angular Elements” (yeah, naming stuff is difficult).
The documentation is pretty minimal, and for sure it doesn’t help you to be able to use in a real world project.
So it took me a while, and thanks to many contributions I found in many blogs, to be able to have a grasp of the full flow, from making to consuming them.

The topic is pretty big, as it involve different concepts, like:
– how to create a Custom Element in Angular
– how to expose a Custom Element from Angular
– how to consume an external Custom Element in Angular
– how to consume a Custom Element ent in Angular Forms
– how to consume an Angular Custom Element in vanilla Html & Javascript
– how to customize a Custom Element via css global variables, html slots, css ::part and shadow DOM

You can find my playground repository in GitHub: Web components playground.
I hope it will help someone else to start with this topic and be productive in a short amount of time. NB. You will find some links in the readme homepage.

I want also to mention a Pluralsight course that I found very well done, a good explanation of the basic concepts via vanilla html/js, though is a bit outdated “A Practical Guide to Vanilla Web Components” (by Leon Revill), I think it’s still worth watching.

My feedback about Custom Elements after few days of playing with them:
– Apple doesn’t support Web Components for existing tags (custom built-in elements), as the other main vendors do. So you need a polyfill, testing, and a ton of hope.
– The Mozilla documentation is pretty good, but who writes vanilla html/js nowadays?
– Making and exporting a Custom Element from Angular in a easy way is not a 5 minute task. I was not able to find a way to generate a bundle to expose for consuming in other projects (I mean production ready, with versioning, polyfill, minified, etc). Maybe a npm library? but how to expose a Custom Component via an Angular Library? there’s no documentation about this. When you create a new project via Angular CLI, a library and a Custom Component project use different project types. A Custom Component should bootstrap the element, I’m not sure a library can support this. Any thoughts?
– Debugging is hard
– Styling via global css variables, html slots, ::part, ::theme, etc, is working, but I think it’s missing a good way of documenting it. I mean… like a console command to generate the list of parts and theme elements available.
– I think they can work also with React, they call them “Web Components”, but their documentation looks pretty basic, and there are a lot of warnings 🤷‍♂️

Please share your thoughts, I think this technology will become more and more popular in the future, and it will be nice to be kept up to date!

Add a Comment

Your email address will not be published. Required fields are marked *