title: Is there's any possible way to add html attribute to primefaces component if it's not supported?
body: <p>I have the below table in <code>primefaces</code> :</p>
  <pre><code>         &lt;h:form&gt; 
                      &lt;p:dataTable var=&quot;contentVos&quot; value=&quot;#{serviceBean.clientsVo}&quot; style=&quot;padding-top: 10vmin;margin: auto;max-width: 150vmin;text-align: center&quot;
                                   rows=&quot;3&quot;
                                   paginator=&quot;true&quot;
                                   paginatorTemplate=&quot;{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}&quot;
                                   currentPageReportTemplate=&quot;{startRecord}-{endRecord} of {totalRecords} records&quot;
                                   rowsPerPageTemplate=&quot;3,10,15&quot; 
                                   widgetVar=&quot;clientTable&quot;
                                   reflow=&quot;true&quot;
                                   emptyMessage=&quot;No items found &quot; filteredValue=&quot;#{serviceBean.filteredClientsVos}&quot;
                                   &gt;
                          
                           &lt;f:facet name=&quot;header&quot;&gt;
                              &lt;p:outputPanel&gt;
                                  &lt;h:outputText value=&quot;Search all fields : &quot; /&gt;
                                  &lt;p:inputText id=&quot;globalFilter&quot; onkeyup=&quot;PF('clientTable').filter()&quot; style=&quot;width:150px;background-color: white;&quot; placeholder=&quot;Search&quot;/&gt;
                              &lt;/p:outputPanel&gt;
                          &lt;/f:facet&gt;
  
  
                          &lt;p:column headerText=&quot;client name&quot; filterMatchMode=&quot;startsWith&quot; filterBy=&quot;#{contentVos.name}&quot;&gt;
  
                              &lt;h:outputText value=&quot;#{contentVos.name}&quot; /&gt;
                          &lt;/p:column&gt;
  
  
  
                          &lt;p:column headerText=&quot;client number&quot; filterBy=&quot;#{contentVos.msisdn}&quot; filterMatchMode=&quot;startsWith&quot;&gt;
                              &lt;h:outputText value=&quot;#{contentVos.msisdn}&quot; /&gt;
                          &lt;/p:column&gt;
  
  
                          &lt;p:column headerText=&quot;client Image&quot;&gt;
                              &lt;p:graphicImage value=&quot;http://srv1.spectrum.com.jo:8084/SpectrumMusicPortal/resources/images/#{clientsVos.image}&quot; title=&quot;Normandie&quot; width=&quot;50%&quot; alt=&quot;not avilable&quot; /&gt; 
  
                          &lt;/p:column&gt;
  
                          &lt;p:column headerText=&quot;client country&quot;&gt;
                              &lt;h:outputText value=&quot;#{contentVos.countryName}&quot; /&gt;
                          &lt;/p:column&gt;
                          &lt;p:column headerText=&quot;added by&quot; rendered=&quot;#{serviceBean.usersVo.id == 2}&quot;&gt;
                              &lt;h:outputText value=&quot;#{contentVos.userName}&quot; /&gt;
                          &lt;/p:column&gt;
                      &lt;/p:dataTable&gt;
  
   &lt;/h:form&gt;
  </code></pre>
  <p>And I'm trying to add a <code>placeholder</code> for the filter box using primefaces , put it's not supported so I tried to add it using javascript  like the below way :</p>
  <pre><code>  &lt;script&gt;
          const placeholder = 
          document.getElementById('j_idt12:j_idt13:j_idt16:filter'); 
  
          placeholder.setAttribute(&quot;placeholder&quot;,&quot;search&quot;);
      &lt;/script&gt;
  </code></pre>
  <p>for sure it not worked because the targeted item <code>filterBy</code> don't have attribute <code>placeholder</code>
  can anyone advise how could I implement it?</p>