Traversing: $.fn.contents() supports HTMLTemplateElement

Fixes gh-3436
Closes gh-3462

2 files changed, 64 insertions, 1 deletions

diff --git a/src/traversing.js b/src/traversing.js
index 50cd2d6ee..d96869017 100644
--- a/src/traversing.js
+++ b/src/traversing.js
@@ -143,7 +143,18 @@ jQuery.each( {
 		return siblings( elem.firstChild );
 	},
 	contents: function( elem ) {
-		return elem.contentDocument || jQuery.merge( [], elem.childNodes );
+        if ( jQuery.nodeName( elem, "iframe" ) ) {
+            return elem.contentDocument;
+        }
+
+        // Support: IE 9 - 11 only, iOS 7 only, Android Browser <=4.3 only
+        // Treat the template element as a regular one in browsers that
+        // don't support it.
+        if ( jQuery.nodeName( elem, "template" ) ) {
+            elem = elem.content || elem;
+        }
+
+        return jQuery.merge( [], elem.childNodes );
 	}
 }, function( name, fn ) {
 	jQuery.fn[ name ] = function( until, selector ) {
diff --git a/test/unit/traversing.js b/test/unit/traversing.js
index c7ed01415..83c267a27 100644
--- a/test/unit/traversing.js
+++ b/test/unit/traversing.js
@@ -743,6 +743,58 @@ QUnit.test( "contents()", function( assert ) {
 	assert.equal( c[ 0 ].nodeValue, "hi", "Check node,textnode,comment contents is just the one from span" );
 } );
 
+QUnit.test( "contents() for <template />", function( assert ) {
+    assert.expect( 4 );
+
+    jQuery( "#qunit-fixture" ).append(
+        "<template id='template'>" +
+        "    <div id='template-div0'>" +
+        "        <span>Hello, Web Component!</span>" +
+        "    </div>" +
+        "    <div id='template-div1'></div>" +
+        "    <div id='template-div2'></div>" +
+        "</template>"
+    );
+
+    var contents = jQuery( "#template" ).contents();
+    assert.equal( contents.length, 6, "Check template element contents" );
+
+    assert.equal( contents.find( "span" ).text(), "Hello, Web Component!", "Find span in template and check its text" );
+
+    jQuery( "<div id='templateTest' />" ).append(
+        jQuery( jQuery.map( contents, function( node ) {
+            return document.importNode( node, true );
+        } ) )
+    ).appendTo( "#qunit-fixture" );
+
+    contents = jQuery( "#templateTest" ).contents();
+    assert.equal( contents.length, 6, "Check cloned nodes of template element contents" );
+
+    assert.equal( contents.filter( "div" ).length, 3, "Count cloned elements from template" );
+} );
+
+QUnit[ "content" in document.createElement( "template" ) ? "test" : "skip" ](
+	"contents() for <template /> remains inert",
+	function( assert ) {
+        assert.expect( 2 );
+
+		Globals.register( "testScript" );
+		Globals.register( "testImgOnload" );
+
+        jQuery( "#qunit-fixture" ).append(
+            "<template id='template'>" +
+            "    <script>testScript = 1;</script>" +
+            "    <img src='data/1x1.jpg' onload='testImgOnload = 1' >" +
+            "</template>"
+        );
+
+        var content = jQuery( "#template" ).contents();
+
+        assert.strictEqual( window.testScript, true, "script in template isn't executed" );
+        assert.strictEqual( window.testImgOnload, true, "onload of image in template isn't executed" );
+	}
+);
+
 QUnit.test( "sort direction", function( assert ) {
 	assert.expect( 12 );