feat: Extends createWebComponent (#18890)

* feat: Extends createWebComponent

Add optional properties to
createWebComponent to be able to use
it instead of loadComponentScript
and createElement when adding properties.

Add fucntion hook to listen to onLoad for
the webcomponent script.

part of #18816

* add missing @param javadocs

Author: caalador

flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx

@@ -368,11 +368,15 @@ export const serverSideRoutes = [
  * Load the script for an exported WebComponent with the given tag
  *
  * @param tag name of the exported web-component to load
+ * @param onload optional callback to be called for script onload
  */
-export const loadComponentScript = (tag: String) => {
+export const loadComponentScript = (tag: String, onload?: () => void) => {
     useEffect(() => {
         const script = document.createElement('script');
         script.src = `/web-component/${tag}.js`;
+        if(onload) {
+            script.onload = onload;
+        }
         document.head.appendChild(script);
 
         return () => {
@@ -381,12 +385,22 @@ export const loadComponentScript = (tag: String) => {
     }, []);
 };
 
+interface Properties {
+    [key: string]: string;
+}
+
 /**
  * Load WebComponent script and create a React element for the WebComponent.
  *
  * @param tag custom web-component tag name.
+ * @param props optional Properties object to create element attributes with
+ * @param onload optional callback to be called for script onload
  */
-export const createWebComponent = (tag: string) => {
-    loadComponentScript(tag);
+export const createWebComponent = (tag: string, props?: Properties, onload?: () => void) => {
+    loadComponentScript(tag, onload);
+    if(props) {
+        return React.createElement(tag, props);
+    }
     return React.createElement(tag);
 };
+