How to access client-side component attributes from the composer

<?page title="Welcome" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" root="./winWelcome" ?>

<script type="text/javascript">
	
	function checkAttribute(element) {
		
		var component = document.getElementById(element.uuid);
		var attribute = component.getAttribute("MyAttribute");
		alert(attribute);
        }
	
</script>

<zk xmlns:w="http://www.zkoss.org/2005/zk/client" xmlns:d="http://www.zkoss.org/2005/zk/client/attribute">

    <window id="winWelcome" title="Welcome" border="normal" apply="controllers.WelcomeForm" width="450px" height="100%">

          <textbox id="txtLogin" w:onFocus="checkAttribute(this)" />

    </window>

</zk>

package controllers;

public class WelcomeForm extends GenericForwardComposer {

	private static final long serialVersionUID = 1L;
	
	/*
	 * The data binder 
	 */
	private AnnotateDataBinder binder;
	
	/*
	 * Autowired components
	 */
	private Window winWelcome;
	private Textbox txtLogin;
	
	public void doAfterCompose(Component window) {
		
		try {
			super.doAfterCompose(window);
		} 
		catch (Exception e) {
			e.printStackTrace();
		}
		
		if (self != null)
			self.setAttribute("controller", this);
		
		txtLogin.setAttribute("d:MyAttribute", "my-attribute");
	}
	
	public void onCreate$winWelcome(Event event) {
		
		binder = (AnnotateDataBinder) event.getTarget().getAttribute("binder", true);
		
		binder.loadAll();
	}
}