Support for web components

[lastmjs]

This is potentially an idea for improvement. Is there support for the web components standards: template, custom elements, shadow DOM?

[mbasso]

Hi @lastmjs,
it's a nice idea. At the moment I need some time to learn more about this topic, I haven't in mind if it can be added directly to the core of asm-dom without a new module. I'll look into it as soon as possible!

[SatoshiKawabata]

I'm looking forward to support Web Components!
I tried Web Components but it was not working...
https://github.com/SatoshiKawabata/asm-dom-example

[mbasso]

Hi @SatoshiKawabata,
I've just checked out your example and I've found a problem with the patch function, in particular, you need to init asm-dom with the option unsafePatch = true.
In this way you can call patch in 2 different places (inside and outside the web-component).
You can read more about that here, this is basically a guard that prevents strange behaviours if you try to provide wrong params to patch.
I've also found your asm-dom-vs-virtual-dom repository (that's awesome 😄 ) and there all works fine, so don't worry about this option.

If you try to modify your code as follow you can see that your web component works as expected:

init({
  unsafePatch: true,
}).then(asmDom => {
  // ...
});

If you are interested in experimenting with asm-dom and webcomponents please let me know, it might be a good starting point to write some tests

[SatoshiKawabata]

@mbasso Great! It's working! Thanks.

[mbasso]

@SatoshiKawabata you're welcome!

@lastmjs are you thinking about something like this for web components? (it can be done in the same way using C++ APIs)
Or you would like to have a different API?

[stereobooster]

There is also https://github.com/skatejs/ssr, which uses undom to generate WebComponents at the server side. It can be useful reference