title: Polymer and WebComponentsReady event
body: <p>According to the <a href="http://www.polymer-project.org/polymer.html#WebComponentsReady">Polymer docs</a>, the <code>WebComponentsReady</code> event is necessary because...</p>
  
  <blockquote>
    <p>The polyfills parse element definitions and handle their upgrade asynchronously. If you prematurely fetch the element from the DOM before it has a chance to upgrade, you’ll be working with an HTMLUnknownElement. In these situations, wait for the WebComponentsReady event before interacting with the element</p>
  </blockquote>
  
  <p>I have an HTML page that imports a single web component and registers a handler that logs a statement when all web components are loaded:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="bower_components/platform/platform.js"&gt;&lt;/script&gt;
          &lt;link rel="import" href="elements/my-element.html"&gt;
      &lt;/head&gt;
      &lt;body unresolved&gt;
          &lt;my-element&gt;&lt;/my-element&gt;
          &lt;script&gt;
              window.addEventListener('WebComponentsReady', function(e) {
                  console.log('components ready');
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Why is the <code>WebComponentsReady</code> event firing before my-element's <code>ready</code> polymer event?</strong> I need to know when I can interact with the custom element, e.g. change its properties and call its public methods.</p>