Possibilites to manipulate client side rendered HTML code without breaking

Hello,
as far as I understood Vaadin doesn't generate HTML code on the server side.
Instead a state is sent from server to client which is rendered on the client side (so in the web browser) to HTML code.
I now want to understand, how a state change on client or server side is detected and send to server or client.

Im currently thinking about implementing an XSL transformation which removes some
unnecessary "<div>" elements from client side generated HTML code.

The Layout is looking like that
div.v-horizontallayout
    div.v-slot
        div.v-horizontallayout
            div.v-slot
                div (with form elements)

What happens if i delete through my xsl code all horizontal layout container elements?
I want to have HTML code like that:
 div (with form elements)
 
If i now fill out the form and submit it, will the synchronisation between client
and server still work?
And if serverside validation fails, can the server still generate a valid shared state
and send to the client?

What items are part of the synchronisation - all Layout and UI Components or only
UI Components?
How does the connection between client and server work - on basis of generated Ids
on Layout and UI components - like in JSF see http://illegalargumentexception.blogspot.de/2009/02/jsf-working-with-component-ids.html

As far as i found out, there are two ways of communicating a state change from client to server and from server to client:
- an RPC call which communicate a stateless event like a button click from client to server
see https://vaadin.com/docs/-/part/framework/gwt/gwt-rpc.html
- a shared state which is send from server to client and which should be considered on the client-side widget as read-only
see https://vaadin.com/docs/-/part/framework/gwt/gwt-shared-state.html

Thanks for your help in advance!

Hi,
The Vaadin runtime relies on the fact that DOM structure of the Vaadin widgets have a certain form. Changing it behind the scenes will almost certainly break something. The client-server communication should work regardless, but fetching data from layouts and updating the client-side in response to this commucation will probably not work. 

The two communcations forms you mention are the ones supported by the Framework. Components on the server-side have a connector on the client-side. The connector then has a reference to a gwt-widget, which represents a DOM subtree.

A better solution than removing stuff from the constructed DOM would be to use simpler layouts e.g. the CssLayout, which is essentially just a div.

Hope this answer helps

-Pontus

Hello Mr Boström,
thanks a lot for this quick and detailed answear.
Very good to know, that manipulation of gwt-widget DOM subtree can break the synchronisation.

Best regards
Frank