LitElement lacks compatibility to Polymer elements

Question

Polymer 3 and LitElement looks very attractive for future component-based development and I'm looking forward to using them in my projects.

But one of the stumbling blocks here is that the old Polymer codebase with lots of ready-to-use elements doesn't seem to be fully compatible with LitElement and upcoming Material Web components.

For example, iron-overlay-behavior from the paper-dialog fails to provide focus trapping if any of the parent elements are implement with LitElement base. I know that this issue is probably caused mostly by the iron-ovelay-behavior implementation, but the main question stays the same.

Does it mean that if you want to adopt LitElement in your project you are forced to implement your own dialog component from a scratch, and probably many of other elements that previously were available as paper elements?

Answer 1

We started our project late last year using Polymer and have been slowly moving toward lit-Element over the past 4 or 5 months. Though there are some hiccups as you described, the two are pretty compatible. For instance, we created a number of inputs that extend from paper-input, but our forms are a mix of Polymer and LitElement.

In my opinion, I would probably recommend sticking with LitElement for now and trying to create your own components when possible. You can't do it always but it works a LOT of the time.

Answer 2

Yes, that's what it means - despite both inheriting from HTMLElement, PolymerElement and LitElement are incompatible.

One easy example of this basic incompatibility is Polymer's choice of {{two-way}} and [[one-way]] data-binding, as compared to LitElement's only offering ${one-way}. In some cases it may be very straight-forward to convert one to the other, but that is not necessarily the case, and will likely be even less so moving forward, as LitElement has now essentially replaced PolymerElement in Polymer 3.0.

I would recommend that you roll your own new LitElement-based components - and consider publishing them to webcomponents.org, so that others can benefit from your ready-to-use elements, the same way you had hoped to with the old Polymer codebase. (note documentation guide for Polymer components)