JavaServer Faces and HTML5 Web Components

@FacesComponent(value = "org.webfaces.ComponentModelDemo")
public class ComponentModelDemo extends UINamingContainer {

    public String getMessage() {
        return (String)super.getStateHelper().get("message");
    }

    public void setMessage(String message) {
        super.getStateHelper().put("message", message);
    }
	...
}

ComponentModelDemo comp;
...
comp.getAttribute("message") == com.getMessage();

<span>#{cc.attrs.message}</span> == <span>#{cc.message}</span>

<h:commandButton actionListener="#{demoController.handleActionEvent}"
	value="Fire Action Event"/>

@Named
public class DemoController {
	...
    public void handleActionEvent(ActionEvent e) {
        this.setMessage("Action event fired by " + e.getComponent().getClientId());
    }
	...
}

<ui:composition xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:cc="http://java.sun.com/jsf/composite"
                xmlns:jsf="http://xmlns.jcp.org/jsf" xmlns:f="http://xmlns.jcp.org/jsf/core">

    <cc:interface componentType="org.webfaces.ComponentModelDemo">
	...
    </cc:interface>
    <cc:implementation>
        <f:event type="preRenderComponent" listener="#{cc.preRender}"/>
	...
	</cc:implementation
</ui:composition>

@FacesComponent(value = "org.webfaces.ComponentModelDemo")
public class ComponentModelDemo extends UINamingContainer {

    public void preRender(ComponentSystemEvent event) {
        System.out.println("Inside preRender event");
    }
	...
}

get message() {
	return this.hasAttribute('message');
}

set message(message) {
	if (message) {
		this.setAttribute('message', message);
	}else{
		this.removeAttribute('message');
	}
}

/** Fires when an attribute was added, removed, or updated */
attributeChangedCallback(attr, oldVal, newVal) {
	if (attr === 'message') {
		let messageElement = this.shadowRoot.querySelector('#message');
		messageElement.innerText = newVal;
	}
}

class ComponentModelDemo extends HTMLElement {

	...

	/** Fires when an instance was inserted into the document */
	connectedCallback() {

	};

	/** Fires when an instance was removed from the document */
	disconnectedCallback() {
	};

	/** Fires when an attribute was added, removed, or updated */
	attributeChangedCallback(attr, oldVal, newVal) {
		if (attr === 'message') {
			let messageElement = this.shadowRoot.querySelector('#message');
			messageElement.innerText = newVal;
		}
	}

	/** Fires when the element is moved to a new document */
	adoptedCallback() {
	}
}