Controle fino do HTML gerado com Pass Through Attributes e Elements do JSF 2.2

Uma das maiores vantagens e também um dos problemas mais irritantes do JSF é o controle fino do HTML gerado pelo componentes. Em certas situações não temos a necessidade de nos preocupar com o HTML, CSS ou JavaScript gerado pelos componentes; noutras, por outro lado, precisamos fazer ajustes finos no código renderizado para o browser pelos componentes para fazer correções na página relacionados a cross-browser, responsividade ou simplesmente utilizar determinados plugins do jQuery.

Esse problema ficou mais critico com a chegado do HTML5, na qual trouxe vários atributos e elementos para simplificar e melhorar o desenvolvimento Web, como o atributo placeholder, que adiciona um texto em um input vazio. Se tentarmos adicionar estes atributos do HTML5 (ou mesmo customizados) diretamente no componente eles serão ignorados pelas classes renderer’s do JSF, como a seguir:

<h:inputText id="email" value="#{bean.email}" placeholder="placeholder" />

O código acima não renderizará o atributo placeholder para o browser. Ele simplesmente será ignorado pelo JSF. Até a versão 2.1 do JSF isso só se resolvia estendendo e alterando as classes renderizadores dos componentes, o que pode dar mais trabalho do que um desenvolvedor gostaria.

Mas com o JSF 2.2 este problema não mais existe, pois esta nova versão trouxe consigo o suporte HTML5 através do HTML Friendly Markup, na qual nos permite inserir e modificar atributos diretamente no componente (pass through attributes) e até mesmo escrever páginas 100% HTML na qual podem ter seus elementos ligados a componentes no lado servidor (pass through elements), o que é ótimo para tirar proveito das novidades do HTML5.