Script and Link in SharePoint CQWP XSL Style Sheet

/

Help!  I added some script and link tags to my XSL style sheet for my Content Query Web Part, and now SharePoint has stopped working!

 

Problem

The main problem is not very obvious, but it's basically that SharePoint is spitting out incorrect HTML, that your browser can't render - so your browser starts guessing what the page should look like.  And since SharePoint 2010 relies heavily on javascript based client side objects, the ribbons, actions, web part zones all start to collapse once the page itself isn't rendering correctly.

When you type in an XSL (XML) file:

<script src="/Style Library/js/myscript.js" ></script>

SharePoint processes this as correct XML, but then proceeds to output:

<script src="/Style Library/js/myscript.js" />

Which is also correct XML, but is incorrect HTML!

The same happens for a link to CSS

<link rel="stypesheet" href="/Style Library/css/mycss.css" ></link> becomes <link rel="stypesheet" href="/Style Library/css/mycss.css" />

 

You wanted:

<script></script>
<script></script>
<link></link>
<div class="mycss">
</div>

SharePoint produced:

<script />
<script />
<link />
<div class="mycss">
</div>

Your browser doesn't understand <script />, so it begins guessing what the page should look like:
<script>
<script>
<link>
<div class="mycss"></div>

Result:

The DOM has just blown up.

 

Fix

When in doubt, always use the <xsl:value-of> in your XSL

<xsl:value-of disable-output-escaping="yes" 
select="string('&lt;link rel=&quot;stylesheet&quot; href=&quot;/Style Library/mycss.css&quot;&gt;&lt;/link&gt;')" />
<xsl:value-of disable-output-escaping="yes" 
select="string('&lt;script src=&quot;/Style Library/myscript.js&quot;&gt;&lt;/script&gt;')" />
You will need to escape the characters " [&quot;]  < [&lt;] and > [&gt;]