x-jquery HTML Custom Element Test

gistfile1.html

<!-- This will produce a CORS error (expected) -->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>-->
<element name="x-jquery">
    <!-- This will produce a CORS error (expected) -->
    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>-->
    <template>
        
        <!-- This won't load at all, even with content in the element -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        
        <style>
            
            @host {
                * { display: none }
            }
            
        </style>
        
    </template>
    <!-- This will produce a CORS error (expected) -->
    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>-->
    <script>
        
        /* this will throw
           Uncaught TypeError: Cannot call method 'dispatchEvent' of null
           in polymer.js */
        //document.write( '<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"><\/script>' );
        
        
        Polymer.register( this, {
            jQuery: null,
            ready: function() {
                
                //this always logs "undefined, null"
                console.log( window.jQuery, this.jQuery );
            }
        } );
        
        //Here this.ready will be called before the script was loaded
        var el = this;
        var head = document.getElementsByTagName( 'head' )[ 0 ];
        var script = document.createElement( 'script' );
        //this.holdReady( true ); ??
        script.onload = function() {
            
            //this.holdReady( false ); ??
            el.jQuery = window.jQuery;
        }
        //even when not async
        script.async = false;
        script.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js';
        head.appendChild( script );
        
    </script>
</element>