Use with web components?

[brodycj]

I am curious if anyone thought about how this wonderful library might be used with custom elements, etc. I am thinking in comparison to react, as in a few articles I found:

• https://staltz.com/react-could-love-web-components.html
• https://robdodson.me/regarding-the-broken-promise-of-web-components/
• https://medium.com/dev-channel/the-case-for-custom-elements-part-1-65d807b4b439
• https://hackernoon.com/web-components-the-react-way-8ed5b6f4f942

[brodycj]

Also any ideas for higher level app components analogous to https://github.com/lastmjs/redux-store-element?

[adamhaile]

I have to admit that I haven't explored web components beyond some tinkering. At a first glance, I think they'll integrate reasonably easily with Surplus since Surplus creates native DOM nodes (no middle layer to negotiate). Right now I'm mostly working on solidifying SVG support but hope to look at web components after that.

[ismail-codar]

https://github.com/webcomponents/custom-elements-everywhere is good for testing.

[adamhaile]

Thanks Ismail, that looks super useful!

[adamhaile]

I cloned custom-elements-everywhere and added a surplus implementation. It shook loose one bug in surplus' codegen: we created bad identifiers for custom elements that had two dashes in their names due to a regex bug. After fixing that, surplus passes all of their "basic" web component tests. It fails some advanced ones because there's no framework support for declaratively subscribing to custom events. I.e., right now when you do <div onclick={...}></div>, the onclick parameter is no different from any property: you're just setting the .onclick property of the div. But that mechanism doesn't work for custom elements, as there's no .onMySpecialEvent property.

I could add compiler support to convert setting .onclick to node.addEventListener('click', ...), but I have to think about if that's a good idea. I wouldn't want to slow down the common cases to accomodate the corner case of custom events.

[adamhaile]

I resurrected a small utility for doing declarative custom event binding: https://github.com/adamhaile/surplus-mixin-on . It uses addEventListener() under the hood instead of the DOM node.on... properties. With it, Surplus gets a 100% score in custom-elements-everywhere tests on both Chrome and Firefox.

💯

[ismail-codar]

It's nice not to lose speed. We are waiting it in the https://github.com/webcomponents/custom-elements-everywhere/tree/master/libraries

[brodycj]

Really awesome, thanks guys!

[adamhaile]

Submitted a PR to add Surplus to custom-elements-everywhere: https://github.com/webcomponents/custom-elements-everywhere/pull/231