Uploaded image for project: 'PUBLIC - Liferay Faces'
  1. PUBLIC - Liferay Faces
  2. FACES-3231

HeadResponseWriters render <script> template child elements as direct children of <head>

    Details

      Description

      Background:

      Certain HTML templating frameworks such as Handlebars.js utilize <script> elements in the <head> section with type="text/template" or type="data/template" or some other template type. The browser allows these template scripts to exist, but does not render their internal contents, so frameworks can extract and modify the contents before allowing the browser to render them (see here for more details). When template scripts are used in the <h:head> section in Liferay Faces, their contents are rendered directly inside the <head> tag rather then inside their parent script. This bug is due to the fact that all head elements are assumed to be direct descendants of the <head> tag due to the use of ElementWriterStack.

      Steps to Reproduce:

      1. Copy the following text into the jsf-applicant-portlet's portletViewMode.xhtml:
        <?xml version="1.0" encoding="UTF-8"?>
        <f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:alloy="http://liferay.com/faces/alloy"
        	xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html"
        	xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
        	<h:head>
        		<script id="script-template" type="data/template">
        			<div class="example">Exampletemplate: <a href="/">Click here</a></div>
        		</script>
        	</h:head>
        	<h:body>
        		<button onclick=" document.getElementById('container').innerHTML = document.getElementById('script-template').innerHTML; return false;">Example</button>
        		<div id="container" />
        	</h:body>
        </f:view>
        
      2. Deploy the portlet with or without bridge-ext.
      3. Add the portlet to a page.
      4. Click the Example button.

      If the bug still exists, nothing will happen. You can also confirm that the bug still exists by viewing the source received by the browser (note: not inspecting the elements since the browser may "fix" that html) and checking that the template html is printed like this:

      <head>
          <!-- ... -->
          <a href="/">Click here</a>
          <div class="example">Exampletemplate: </div>
          <script data-senna-track="permanent" id="script-template" type="data/template"> </script>
      </head>
      

      If the bug is fixed, the Click here link will appear below the button. The Click here link will appear because the template markup in the head section will be correctly rendered (if you check the (view) source):

      <head>
          <!-- ... -->
          <script id="script-template" type="data/template">
              <div class="example">Exampletemplate: <a href="/">Click here</a></div>
          </script>
      </head>
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                kyle.stiemann Kyle Stiemann
                Reporter:
                kyle.stiemann Kyle Stiemann
                Participants of an Issue:
              • Votes:
                0 Vote for this issue
                Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: