I just thought that my approach to this issue would be to create a promise for each event (each event handler resolves its promise), and then do Promise.all(). If you do this, you can test for native support of web components which means 'webcomponentsready' doesn't fire at all[0], and resolve it immediately, and your code will still work when Polymer change to using native web components...
Max. [0] <https://www.polymer-project.org/1.0/docs/migration.html#polymer-ready> On Sun, 27 Dec 2015 at 03:44 Darin Hensley <[email protected]> wrote: > It's been working for many refreshes...but it just happened again... I got > 'Uncaught TypeError: Cannot read property 'addEventListener' of undefined' > for 'panel.addEventListener("content-scroll", moveTitle);'. This is in > chrome where the initialize.js script is loaded last in the index.html. > > function makeGlobalElements() { > //elements is not routing list, routing list is elementList > > panel = Polymer.dom(document.rootElement).querySelector( > 'paper-header-panel[main]'); > rippleElement = Polymer.dom(document.rootElement).querySelector( > '#ripple-element'); > toolbar = Polymer.dom(document.rootElement).querySelector( > '#main-toolbar'); > headerName = Polymer.dom(document.rootElement).querySelector( > '#name-title'); > drawer = Polymer.dom(document.rootElement).querySelector( > 'paper-drawer-panel'); > mainPanelContent = Polymer.dom(document.rootElement).querySelector( > '#mainPanelContent'); > > }; > > > function attatchListeners() { > panel.addEventListener("content-scroll", moveTitle); > > .... > > > function initializeYay() { > makeGlobalElements(); > attatchListeners(); > setUpRoutes(); > removeSplash(); > //fetchPdfjs(); > } > > if (!webComponentsSupported) { > document.addEventListener('WebComponentsReady', initializeYay); > } else { > initializeYay(); > page('/portfolio'); > } > > > > ---- > > On Friday, December 25, 2015 at 9:37:55 AM UTC-6, Eric Bidelman wrote: > >> You can attach listeners to elements before they're upgraded and ready. >> That's a nice property of custom elements and DOM events. Waiting to attach >> until WCR means you may miss the event the first time it's fired. >> >> On Thu, Dec 24, 2015, 10:32 PM Darin Hensley <[email protected]> wrote: >> > I am having issues(not consistent....random) where the elements are not >>> ready when I attach the listeners. I placed a setTimeout to try and >>> compensate the random race condition. Should these elements be ready during >>> the time of their queries when WebComponentsReady fires or with the >>> initialize.js script placed last at the bottom of the index.html? >>> function makeGlobalElements() { >>> //elements is not routing list, routing list is elementList >>> panel = document.querySelector('paper-header-panel[main]'); >>> rippleElement = document.getElementById('ripple-element'); >>> toolbar = document.querySelector('#main-toolbar'); >>> headerName = document.getElementById('name-title'); >>> drawer = document.querySelector('paper-drawer-panel'); >>> mainPanelContent = document.getElementById('mainPanelContent'); >>> }; >>> >>> function attatchListeners() { >>> panel.addEventListener("content-scroll", moveTitle); >>> ['webkitAnimationEnd', 'animationend'] >>> .forEach(function(vendor) { >>> mainPanelContent.addEventListener(vendor, function (animationEvent) { >>> if (animationEvent.animationName === "slide-down") { >>> afterSlideDown.runStack(); >>> mainPanelContent.classList.remove('slide-down-now'); >>> } >>> }); >>> headerName.addEventListener(vendor, function() { >>> headerName.classList.remove('fade-title'); >>> }); >>> }); >>> }; >>> >>> >>> function initializeYay() { >>> makeGlobalElements(); >>> setTimeout(attatchListeners, 500); >>> setUpRoutes(); >>> removeSplash(); >>> //fetchPdfjs(); >>> } >>> >>> if (!webComponentsSupported) { >>> document.addEventListener('WebComponentsReady', initializeYay); >>> } else { >>> initializeYay(); >>> page('/portfolio'); >>> } >>> >>> >>> >>> >>> On Tuesday, December 22, 2015 at 9:44:05 PM UTC-6, Darin Hensley wrote: >>>> >>>> stack overflow post >>>> <http://stackoverflow.com/questions/34428255/domcontentloaded-never-fires-can-not-use-webcomponentsready> >>>> >>>> >>>> Using polymer 1.2.3, >>>> >>>> >>>> In linux firefox 42.0, where the polyfill(webcomponents-lite.js) is >>>> used: >>>> >>>> >>>> `WebComponentsReady` fires to soon, because I `querySelect` and >>>> `getElementById` elements that do not exist yet in `initialize`. >>>> >>>> >>>> window.addEventListener('WebComponentsReady', function() { >>>> initialize >>>> .then(attatchListeners) >>>> >>>> >>>> So I am using `DOMContentLoaded` but it never fires: >>>> >>>> document.addEventListener('DOMContentLoaded', function() { >>>> initialize >>>> .then(attatchListeners) >>>> >>>> >>>> >>>> Any ideas on how to make initialize run when the elements are available >>>> for `querySelect()`? >>>> >>>> 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 [email protected]. >> >> >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/polymer-dev/13dcb312-f0a9-44d5-bf55-29be4cd38441%40googlegroups.com >>> <https://groups.google.com/d/msgid/polymer-dev/13dcb312-f0a9-44d5-bf55-29be4cd38441%40googlegroups.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 [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/ecbf652f-4130-4118-8a29-30de8c98ff24%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/ecbf652f-4130-4118-8a29-30de8c98ff24%40googlegroups.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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAMZCrPinMSavSyR5kAjqper141ry_K-8zm9n8q2Ti-UyyYCyXQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
