On Mon, May 18, 2015 at 5:46 PM, Eric Eslinger <eric.eslin...@gmail.com> wrote:
> One of the really rad things about Polymer (0.5) and webcomponents is that > everything is just DOM. You can pretty easily use core- and paper- > components libraries inside of an (say) angular app to render out content. > Doesn't matter if you're using jQuery raw or ember or what have you- DOM is > DOM, and it mostly works (modulo some property / attribute bindings) > > The new localDom API seems to indicate that this may no longer be the > case- if I'm redistributing DOM content, I need to use the polymer dom > interface, rather than just plain parent/child/append calls on document. > > This seems to indicate that modern polymer isn't going to be compatible > with angular, or with any other library that manipulates the DOM, or is it > the case that this only matters when there's more complicated shady/light > manipulations? > The full answer is that there are a range of options with various trade-offs, and for Polymer.dom() there will be a set of workarounds for integration with various libraries. The best option, if available, is native Shadow DOM. But that's not so interesting because everything just works :) So, without native, there are now two options: Shady DOM and Shadow DOM polyfill. It's important to note that you can still use the full polyfill. The polyfill has the upside that it's _mostly_ compatible with existing code (there are some cases that aren't wrapped, like `document`). The downside is that it's slow, possibly unacceptably slow in mobile Safari, say. Shady DOM is fast, but brings up the compatibility issue. But... we've done experiments with making other libraries use Shady DOM and it looks like it'll work well enough in a lot of situations. One strategy is custom adapters. Angular2 for instance has a complete DOM abstraction so that it can use different APIs, like virtual DOM and Dart's dart:html. It's really trivial to implement a Shady DOM version, and it all works as expected. I'm guessing that virtual-dom-ish oriented frameworks like React and Ember will be amenable to this kind of adaptor, though they may not be as easily hookable as Angular2. Another strategy is patching just enough of the DOM APIs to make a framework happy. We think we can do enough for React, since it uses a pretty small portion of the DOM APIs. > > As an example, if I have content in the drawer part of a > paper-drawer-panel, and then, using jquery or some other element selector, > inject nodes inside of the already-projected menu div, will this break > things? Or is it only the case that I need to use the local DOM api when if > I'm changing the nodes that would be selected as content to project (and > not their child nodes)? > > Is there some way to shim the document-level query selectors in there or > add a mutation observer that calls distributeContent as needed? I'm > guessing it was this shimming and mutation observer that contributed to the > slowness of 0.5 in non-chrome browsers. > Exactly, but again the full polyfill is still available. > > I've got next week blocked out to actually work on getting angular 1.4 to > play nice with polymer 0.9 (we use angular to build the page and manage > data, and polymer for handy flexbox directives and material design ui > bindings). So I guess I'll figure it out then. > I'm guessing that Angular1 will be a little harder to get working than Angular2, but since I know my way around Angular a _little_, I'd be very happy to help out. Cheers, Justin > > e > > Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to polymer-dev+unsubscr...@googlegroups.com. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/CABsi40JyUq76PSwF%2Bxx_k9CXcJtJmnXEOVXstdQu6BVRoYRc6g%40mail.gmail.com > <https://groups.google.com/d/msgid/polymer-dev/CABsi40JyUq76PSwF%2Bxx_k9CXcJtJmnXEOVXstdQu6BVRoYRc6g%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAEKsHmCE5qMh6anu9RBs3a8vSteYZaWn%3DKxrvvb96yd4CVH7LA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
