What exactly is #{component} in EL?

The #{component} is an implicit EL variable referring the current UIComponent in EL scope (see also implicit EL objects). You can usually only refer it in component's HTML attribute or in template text children.

E.g. in case of <h:inputText> it will reference an instance of UIInput class which has among others an isValid() method.

<h:inputText id="foo" required="true"
    style="background: #{component.valid ? '' : 'pink'}"
    onclick="alert('Client ID of this component is #{component.clientId}');" />

You can also use binding attribute to let JSF during view build time put a reference to a component instance in the Facelet scope. This way the component reference will be available anywhere in the Facelet during view render time.

<script>alert('Client ID of foo component is #{foo.clientId}');</script>
<h:inputText binding="#{foo}" />

See also:

• Difference between client id generated by component.clientId and p:component()
• JSF component binding without bean property
• How does the 'binding' attribute work in JSF? When and how should it be used?

The p:widgetVarFromContext is useful when referring to a PrimeFaces widget inside a composite component. There could be more than one instance of your component on the same page. So writing widgetVar="expression" and PF('expression') is out of the question. There would be multiple widgets with the same name. It is then better to omit the widgetVar attribute and use the generated one which is unique because it is based on the clientId.

You can't use #{p:widgetVar('expression')} within your <cc:implementation> because it leads to a Cannot find component for expression "expression" referenced from "j_id1" error instead of the expected PF('widget_expression').

But you can use #{p:widgetVarFromContext('expression', cc)} which will return something like PF('widget_wrapperform_compositecomponent1_expression'). The cc refers to the root of the composite component instance.