Polymer Starter Kit adding function equivalent to ready for the main page

Question

I've got a newly created polymer starter kit, 1.3 to be exact.

I would like to created a method like the one below, on the index.html page

    ready: function() {
      firebase.auth().onAuthStateChanged(function(user) {
        if(user) {
          // console.log('user is logged in');
        } else {
          // console.log('user is not logged in');
        }
      });
    }

On the main page, how can I do it? I would like to instantiate a Polymer element for the application template, but the document stays that should be avoided. If anyone could explain why that would be awesome.

Thanks in advance for any feedback!

Answer 1

On the main page, how can I do it?

In index.html, you could use a WebComponentsReady handler to perform any action that's dependent on all elements being registered:

window.addEventListener('WebComponentsReady', function(e) {
  // imports are loaded and elements have been registered
  ...
});

I would like to instantiate a Polymer element for the application template, but the document stays that should be avoided.

Where did you see that? While version 1.3.0 of the Polymer Starter Kit uses an auto-binding template in index.html instead of an app element, I don't see why you'd try to avoid an app element. In fact, there's growing evidence that an app element is recommended:

• Version 2 of Polymer Starter Kit replaces the auto-binding template with a custom app element

• The dev guide describes the Basic Application Template (generated by polymer-cli) as a custom element:

  The application template is the most basic starting point for any app built with Polymer. It starts with a single bare-bones custom element that can serve as the root of your application, from which you can build in any direction with maximum flexibility.