Where does Ember stand in supporting Web Components? They are now pretty stable and supported by all major browsers. Can they be used in the framework today? Or should we wait? Also, will they eventually make traditional Ember components unnecessary?
1 Like
You can use web components in an Ember app today. If you have a custom element defined and use it in a template, it will work.
I don’t see them replacing Ember components (or React components, or Vue, etc) any time soon. They have a lot of missing features relative to framework components.
There is also the question of whether you can package Ember components as webcomponents. It’s been done in GlimmerJS as a technology preview, but hasn’t made it back into Ember yet as a supported build target. It’s not very hard to do by hand, but the main issue is making an optimized build of Ember that only contains the things you need for your component and nothing else. A lot of current work is bringing that closer, mostly improvements in the build tooling and the package organization.
1 Like
How do I handle interaction between ember and another web component? I am rather new to ember and want to include some web component in an ember application. Now I dont know how to handle events (like a checkbox) predefined in that component and trigger embers own events. Is ember-cli-stencil the way to go?
I think a simple ember-twiddle that demonstrates DDAU-style binding and event handling of a web component used in an ember component’s template would be very helpful. To me at least, this is a very difficult topic to Google (hmm… Ember has components, the web has components, here’s your results which include all of the pages on the Internet related to “web” “ember” and “components”!). I had to search this site and custom-elements-everywhere.com directly to find any relevant information.
I’ll try to create such a twiddle, but I’m just getting started in this area myself, and don’t yet have any custom elements/web components in mind to try, so if someone else does and can put something up quickly, that would be awesome.
I think @alexlafroscia has been doing work in this area based on this issue: Add Ember.js · Issue #237 · webcomponents/custom-elements-everywhere · GitHub
I would write up a Twiddle that might be useful, as I’ve been exploring the WebComponent space for a while and using them in Ember for over a year (check out the headers on nest.com and store.nest.com – shared through a WebComponent!)
I also have a few addons that are relevant to WCs + Ember:
Hello. Is there any recent improvements in ember which can aid EmberComponents to listen events from CustomElements directly ?
Hello @csganes, with the release of Ember Octane (3.16 ~ 3 years ago) – we have the on modifier, which is a shortand for addEventListener and removeEventListener.
And since Octane, the capabilities are pretty much, “If you can do it in plain ol’ JS, you can do it in Ember (using the exact same apis (mostly))”. 
So, for a custom element, you could do <my-web-component {{on "my-custom-event" this.doTheThing}} />
The advantage of using on over vanilla add/remove eventListener is that cleanup is handled for, reducing memory leaks in your app.