Having the following xhtml code:
<h:form id="COTreeForm">
            <p:tree value="#{COBean.root}" var="node" id="COTree" dynamic="true" selectionMode="single">
                <p:ajax event="select" update="@(.coDetailsPanel)" listener="#{COBean.onNodeSelect}" />
                <p:treeNode id="COtreeNode" type="customerOrder" icon="ui-icon-co">
                    <p:outputPanel  id="CO_#{node.key}"> CO: #{node.key} </p:outputPanel>
                    <!--  <p:draggable for="CO_#{node.key}" helper="clone" />  -->  
                </p:treeNode>
                <p:treeNode id="COItreeNode" type="customerOrderItem">
                    <p:outputPanel id="COI_#{node.key}" styleClass="ui-tree-node-label-coi"> COI: #{node.key} </p:outputPanel>
                    <!--  <p:draggable for="COI_#{node.key}" helper="clone" />  -->
                </p:treeNode>
            </p:tree>
    </h:form>
The <p:outputPanel  id="CO_#{node.key}"> CO: #{node.key} </p:outputPanel> is evaluated to the following HTML code:
<span id="COTreeForm:COTree:0:CO_"> CO: customer1_co1 </span>
Why #{node.key} is evaluated to an empty string for the id attribute?! Please notice that it's evaluated correctly as the tag content.