Enable replacing connection indicator with a custom component

[platosha]

Currently, the connection indicator component styling is done through document styles for light DOM, because of compatibility reasons with prior loading indicator customizations. This way have several downsides:

• The component’s DOM is exposed to unintentional style conflicts from other document styles
• The styles for the component require careful targeting to avoid conflicts
• Customization involves defining styles outside of the component’s context
• Default theme styles for the component could be disabled, but because disabling is runtime, the default styles remain in the bundle

The styling use cases in the docs involve changing look and feel completely, and instruct to disable default styles for that reason.

A better way of customizing the connection indicator would be replacing the entire component with a custom implementation. That way, as natural for web components, the DOM structure and the styles are isolated and defined in the same context.

Story:

As an application developer, I want to replace the connection indicator used in Flow and ConnectClient with my custom component

DoD:

• A necessary API for configuration and implementing a custom indicator is added
• There is a tutorial on how to replace the default connection indicator component with a custom one
• Defining a custom connection indicator should disable importing of the default one, so that it does not have overhead in the bundle

[haijian-vaadin]

Step 1 is to have api to disable the default connection indicator. Step 2 is to have documentation on how to use the connection state listener to use own indicator. (Don't need to consider the legacy bootstrapping mode)