This weekend I looked into integrating WebAssembly in web components. This post is a write-up of what I learned.
This experiment is framework agnostic, but for the purposes of my demo I have used C++ compiled to WASM consumed by web components created using Angular Elements.
Using Angular Elements is a convenient way to create web components since you can leverage the full power of the Angular framework for things like template binding.
For the C++ part I decided to use the emscripten compiler, which seems to be the standard for C++ WASM projects these days.
For the purposes of this demo I have created a snippet of C++ code that returns a list of friends. I am a bit rusty when it comes to C++ these days, so I would be grateful for any feedback you may have. The full source is included below:
Including the above code snippet will call into the C++ code and cause the web element to be added to the page and render a list of friends from the data created in the C++ code.
I have added the source code on Github if you want to give it a try.