Fixes #3113

src/standard/utils.html

@@ -164,7 +164,7 @@
     /**
      * Returns a list of nodes distributed to this element's `<content>`.
      *
-     * If this element contans more than one `<content>` in its local DOM,
+     * If this element contains more than one `<content>` in its local DOM,
      * an optional selector may be passed to choose the desired content.
      *
      * @method getContentChildNodes
@@ -181,7 +181,7 @@
      * Returns a list of element children distributed to this element's
      * `<content>`.
      *
-     * If this element contans more than one `<content>` in its
+     * If this element contains more than one `<content>` in its
      * local DOM, an optional selector may be passed to choose the desired
      * content.  This method differs from `getContentChildNodes` in that only
      * elements are returned.
@@ -198,7 +198,7 @@
       });
     },
 
-    
+
     /**
      * Dispatches a custom event with an optional detail value.
      *
@@ -234,13 +234,13 @@
     __eventCache: {},
 
     // NOTE: We optionally cache event objects for efficiency during high
-    // freq. opts. This option cannot be used for events which may have 
+    // freq. opts. This option cannot be used for events which may have
     // `stopPropagation` called on them. On Chrome and Safari (but not FF)
-    // if `stopPropagation` is called, the event cannot be reused. It does not 
+    // if `stopPropagation` is called, the event cannot be reused. It does not
     // dispatch again.
     _getEvent: function(type, bubbles, cancelable, useCache) {
       var event = useCache && this.__eventCache[type];
-      if (!event || ((event.bubbles != bubbles) || 
+      if (!event || ((event.bubbles != bubbles) ||
           (event.cancelable != cancelable))) {
         event = new Event(type, {
           bubbles: Boolean(bubbles),
@@ -358,12 +358,20 @@
      *   loaded.
      * @param {Function} onerror Callback to notify when an import
      *   unsuccessfully loaded.
+     * @param {boolean} optAsync True if the import should be loaded `async`.
+     *   Defaults to `false`.
      * @return {HTMLLinkElement} The link element for the URL to be loaded.
      */
-    importHref: function(href, onload, onerror) {
+    importHref: function(href, onload, onerror, optAsync) {
       var l = document.createElement('link');
       l.rel = 'import';
       l.href = href;
+
+      optAsync = Boolean(optAsync);
+      if (optAsync) {
+        l.setAttribute('async', '');
+      }
+
       var self = this;
       if (onload) {
         l.onload = function(e) {

test/unit/dynamic-import.html

@@ -20,7 +20,7 @@
 <dynamic-element></dynamic-element>
 
 <script>
-  
+
   suite('dynamic imports', function() {
 
     test('use importHref to load and create an element', function(done) {
@@ -36,6 +36,27 @@
       });
     });
 
+    suite('async/sync loading', function() {
+
+      var url = 'dynamic-imports/dynamic-element.html';
+
+      test('importHref sync loads by default', function(done) {
+        Polymer.Base.importHref(url, function(e) {
+          assert.isFalse(e.target.hasAttribute('async'),
+                        'sync load is default');
+          done();
+        });
+      });
+
+      test('importHref sync loading', function(done) {
+        Polymer.Base.importHref(url, function(e) {
+          assert.isTrue(e.target.hasAttribute('async'), 'async load');
+          done();
+        }, null, true);
+      });
+
+    });
+
   });
 
 </script>

test/unit/dynamic-imports/dynamic-element.html

@@ -12,12 +12,12 @@
 
 <dom-module id="dynamic-element">
   <template>
-    <span id="content">dynamic-element</span> : 
+    <span id="content">dynamic-element</span> :
   </template>
 </dom-module>
 <script>
   Polymer({
-  
+
     is: 'dynamic-element',
 
     ready: function() {
@@ -42,4 +42,4 @@
     }
 
   });
-</script>
+</script>