How to add HTML tag in Primefaces <p:panel> header attribute?

Question

I have draw a Primefaces Web page using following code

<p:outputPanel id="TitlePanel">
    <p:outputLabel escape="false" value="#{pageTitle}"/>
</p:outputPanel>   

I want now transform this <p:outputPanel> in a toggleable panel using following code.

<p:panel id="TitlePanel" 
         toggleable="true" 
         closable="true"
         >
    <p:outputLabel escape="false" value="#{pageTitle}"/>
    ...
</p:panel>   

But this don't work because #{pageTitle} is displayed after header of first panel !

I have tried following code

<p:panel id="TitlePanel" 
         toggleable="true" 
         closable="true"
         header="#{pageTitle}"
         >
    ...
</p:panel>   

But this don't work because HTML tag returned by#{pageTitle}are escaped and displayed in title that is not very readable :-)

How can I add HTML tag in 'header' attribute ?

My question is distint from jsf primefaces add p:inputText to p:panel 's header because I search to display output text with specific formatting and the linked question search to insert an input widget in header. The answer is same but the question is different.

Answer 1

This can be solved by simply adding following <f:facet name="header"> bloc.

<p:panel id="TitlePanel" 
             toggleable="true" 
             closable="true"
             >
    <f:facet name="header">
        <p:outputLabel value="#{pageTitle}" escape="false"/>
    </f:facet>
    ...
</p:panel>   

This solution works for many other PrimeFaces components as well.