How to select elements from <template> with jQuery

Question

I have two similar selections. The first uses a <div> tag, which works fine, the second uses a newly <template> tag, which doesn't work anymore.

Can anyone tell me how to get this to work with jQuery using the <template> tag?

HTML

<div id="div">     <div>content</div> </div>  <template id="template">     <div>content</div> </template> 

JavaScript

var $div = $('#div'); var $content = $div.find('div'); console.log($content); //works ($content.length == 1)  var $template = $('#template'); var $content = $template.find('div'); console.log($content); //doesn't work ($content.length == 0) 

---

http://jsfiddle.net/s8b5w0Le/1/

Answer 1

HTMLTemplateElement saves the DOM into a seperate attribute:

JQuery

<script src="jquery-3.1.0.js"></script> <script type="text/javascript">     $(document).ready(function()     {         var $div = $('#div');         var $content = $div.find('div');         console.log($content.text()); // output "content", inner div          var $template = $('#template');         var node = $template.prop('content');         var $content = $(node).find('div');         console.log($content.text()); // output "content", inner template     }); 

JavaScript

document.createElement('template').content 

Answer 2

I'm fairly certain this has to do with Chrome's use of shadow dom (thank Polymer... )

You can either try your luck using the /deep/ combinator (probably won't work on other browsers), but I think the most robust solution would be $template[0].outerHTML as in your comment if you just need the text.

If you need jQuery functionality, using $.parseXML (to avoid Chrome's native dom construction) would probably do the trick across all browsers (can confirm Chrome + FF).

Example here: http://jsfiddle.net/3fe9jjfj

var tc = $('#template')[0].outerHTML;  $template = $($.parseXML(tc)).contents();  console.log($template); console.log($template.find('div')); 

Both logs return as we'd expect, and $template can now be treated as an ordinary jQuery object.