Polyite? Polyte?

[Bruce Anderson]

I'm really excited about Polymer 2 and the wonderful work the team has done (special kudos to the VSCode plug-in!).

I think with Polymer 2, there could be one serious impediment to early adoption, based on my very limited experience.

I see recent queries in this discussion group along the same lines as what I'm focused on:  The desire to quickly wrap legacy JQuery libraries (or extJS) inside Polymer elements.

I was able to do that successfully with Polymer 1, in particular the x-slick-grid Jquery based grid library.  For me, this library is a stop-gap solution until a more fully featured, more modern grid comes along.  I'm watching Vaaden, but Vaaden might not support virtual columns like the x-slick-grid does, which works well for desktop applications.

The ag-grid looks good, but scrolling is slow on IE11 (and Edge), which is the primary browser at my workplace for now (sigh).

Sorry for the tangent....  The issue is that as soon as the component is used within a shadow DOM web component, as opposed to shady dom or pure custom element without shadow DOM, the thing falls apart.  This is even though I made sure the component itself doesn't use shadow dom.  But as soon as I put the component inside another element that uses shadow (not shady) dom, it falls apart.

I tried a few simple things, like copying and pasting all the styles directly inside the component, but to no avail.  I don't what to devote huge amounts of time debugging and fixing code that is on life-support, and that isn't mine (and for which I have very little expertise).  I'd be happy to share more details if you believe I'm missing something straightforward.

My suggestion is to provide a Polymer Lite class (let me call it Polyte), or at least a tutorial on how to create such a thing, which would be quite illuminating:  Especially if other developers / legacy libraries suffer from the same issues.

Users would extend Polyte, that would look for the dom-module equivalent markup and just insert it as innerHTML into the component.  No shadow dom, maybe minimal, one-time only binding, no external styling customizations, like I said really really simple.  Basically a glorified "ng-include", but one that benefits from the URL resolution we get from HTMLImports.  Something that is easily converted to the much more powerful Polymer.Element when the time is right.

I see this being used as a stop-gap solution for places that want to ease into Polymer slowly.  It could be used (or replaced by) the opening pages / routing of the polymer starter kits, where very little of the polymer features are used.  For example the Polymer Shop has an index page, with very little css which gets applied to the inner shop-app.  This might make it easier for some shops supporting more legacy components (and browsers!) can gradually opt-in.  Basically, use fully embraced web components, where possible, but find a way to coexist with code that freaks out from being inside templates / shadow dom, etc.

[Bruce Anderson]

Much more elegant solution is discussed here