Hmm, this all makes sense, and I totally understand the decision process here. It is definitely mobile safari that's driving me here (personally); our webapp is one of those vertical things - captive audience, internal users. So I don't feel terribad saying "please use chrome", where I could rely on the native shadow DOM implementation to make stuff mostly work. It's really mobile safari where I've got issues (it's harder to get people to use chrome on ios than on desktops).
Maybe the full shadow polyfill is what I stick with first, if that keeps everything else on the up-and-up. We'll see- maybe I can grab the appropriate hooks into angular 1. I *really* want to use the css variable-based theming stuff you're providing in polymer 0.9. It's super-rad. The speed hasn't been a horrendous problem, but I have noticed some other inconsistencies in third-party stuff with event retargeting and oddly, document.createTreeWalker, enough to make me want to see if I could get off of the full polyfill. Of course, maybe I'm just being too ambitious. Stick with just angular for a bit, port my UI to ngMaterial, and come back in a year when the platform is more stable and there's (hopefully) better cross-browser native implementations of shadow DOM stuff. Hard to say which would be more difficult. Probably best if I try both and see what happens. e On Mon, May 18, 2015 at 6:19 PM Justin Fagnani <justinfagn...@google.com> wrote: > 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/CABsi40L_1pn1zPY_TGscW966Z6w44dExjzbG_KgZ5%3D--_MVcHg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
