How to listen to custom events from outside any custom element in Polymer Dart 1.0?
<p>I can't figure out how to set-up an event listener for the <code>headerState</code> property of <code>PaperScrollHeaderPanel</code> <strong>outside</strong> of a custom element (specifically from the <code>main</code> function).</p>

<p>I have tried various ways, but nothing triggers my callback:</p>

<pre><code>headerPanel.on['headerState-changed'].listen((_) =&gt; ...);
</code></pre>

<p>or</p>

<pre><code>headerPanel.addEventListener('headerState-changed', (_) =&gt; ...);
</code></pre>

<p>or declaratively</p>

<pre><code>&lt;paper-scroll-header-panel on-headerstate-changed="handleHeaderStateChanged" ...&gt;
</code></pre>

<p>I have tried this with and without the <code>@reflectable</code> annotation on the function, as I am not certain if that even has any effect outside of a Polymer custom element.</p>

<p>I do know how to set-up event handlers inside of custom elements or when using a dom-bind template, but I believe there is supposed to be a way to do it without and it's bugging me to wrap my entire <code>&lt;body&gt;</code> in a custom element just to receive an event.</p>

<p>I am currently using:</p>

<pre><code>polymer: ^1.0.0-rc.10
web_components: ^0.12.1
reflectable: ^0.5.0
polymer_elements: ^1.0.0-rc.5
</code></pre>

<p>Thanks!</p>