Polymer paper-dialog: how can I know when an injected dialog is ready to be toggled?
<p>In my application, in response to user input I inject a paper-dialog containing a scrollable area (<code>paper-dialog-scrollable</code>) into the DOM as the last child of the body.  I inject it when it's called for, because for a few different reasons I find it impractical to include the dialog in the page just in case the user decides to activate it.  I could go into those reasons but I don't think it would be productive.</p>

<p>I inject the dialog like this:</p>

<pre><code>var fragment = "&lt;paper-dialog id='mydialog' ...&gt;&lt;paper-dialog-scrollable ...&gt;...";
$('body').append(fragment);
var dialog = $('#mydialog').get(0);
</code></pre>

<p>The first thing I found out is that if I try to immediately activate the dialog by calling <code>dialog.toggle()</code>, the dialog does appear on Chrome, but on Firefox, I get an error in the console:</p>

<pre><code>TypeError: dialog.toggle is not a function
</code></pre>

<p>I believe this difference is related to the need for more polyfilling on Firefox than on Chrome.  The next thing I tried was to activate the dialog with this code:</p>

<pre><code>Polymer.Base.async(function(){ dialog.toggle(); }, 1);
</code></pre>

<p>With this change, the <code>toggle()</code> method is there when I try to call it, and the dialog appears.</p>

<p>When testing on Chrome, the next problem I encountered is that if the <code>paper-dialog</code> contains a scrollable portion (<code>paper-dialog-scrollable</code>), the scrollable portion will have zero height if I activate the dialog "too soon" after injecting it.  This happens because of a "fit" class on the "scrollable" div which is the sole child of the <code>paper-dialog-scrollable</code> element.  I verified this by manually removing the "fit" class in Chrome Developer Tools &amp; seeing that the dialog was then properly displayed.</p>

<p>In the code for <code>paper-dialog-scrollable</code>, I found this:</p>

<pre><code>attached: function()
{
    this.classList.add('no-padding');
    // Set itself to the overlay sizing target
    this.dialogElement.sizingTarget = this.scrollTarget;
    // If the host is sized, fit the scrollable area to the container.
    // Otherwise let it be its natural size.
    requestAnimationFrame(function() {
        if (this.offsetHeight &gt; 0) {
            // this happens when I toggle "too quickly"
            this.$.scrollable.classList.add('fit');
        }
        this._scroll();
    }.bind(this));
}
</code></pre>

<p>If I wait longer before toggling the dialog:</p>

<pre><code>Polymer.Base.async(function(){ dialog.toggle(); }, 100);
</code></pre>

<p>.. then the "fit" class is absent &amp; the scrollable portion of the dialog is properly displayed.  However, this is no solution because it may be necessary to wait longer (or not as long), depending on how fast the machine is, the current load, etc.  I need the dialog to work reliably without waiting any longer than necessary before toggling it.  Is there some event I can listen for that will fire when it's safe to toggle the dialog?  Also, does anyone have an idea about the <code>paper-dialog-scrollable</code> code that applies the "fit" class?  Maybe there's some way I can prevent this class name from being applied in the first place (besides making the user wait longer than truly necessary)?</p>