address PR comments

mesop/examples/web_component/quickstart/counter_component_app.py

@@ -27,5 +27,7 @@ class ChangeValue(BaseModel):
 
 
 def on_decrement(e: mel.WebEvent):
+  # Creating a Pydantic model from the JSON value of the WebEvent
+  # to enforce type safety.
   decrement = ChangeValue(**e.value)
   me.state(State).value = decrement.value

mesop/examples/web_component/slot/slot_app.py

@@ -18,14 +18,31 @@ def page():
     value=me.state(State).value,
     on_increment=on_increment,
   ):
-    counter_component(
-      value=me.state(State).value,
-      on_decrement=on_decrement,
-    )
+    with me.box():
+      me.text(
+        "You can use built-in components inside the slot of a web component."
+      )
+      #
+      me.checkbox(
+        # Need to set |checked| because of https://github.com/google/mesop/issues/449
+        checked=me.state(State).checked,
+        label="Checked?",
+        on_change=on_checked,
+      )
+      counter_component(
+        value=me.state(State).value,
+        on_decrement=on_decrement,
+      )
+  me.text(f"Checked? {me.state(State).checked}")
+
+
+def on_checked(e: me.CheckboxChangeEvent):
+  me.state(State).checked = e.checked
 
 
 @me.stateclass
 class State:
+  checked: bool
   value: int = 10
 
 

mesop/labs/web_component.py

@@ -9,7 +9,7 @@
 C = TypeVar("C", bound=Callable[..., Any])
 
 
-def web_component(path: str, skip_validation: bool = False):
+def web_component(*, path: str, skip_validation: bool = False):
   """A decorator for defining a web component.
 
   This decorator is used to define a web component. It takes a path to the

mesop/server/static_file_serving.py

@@ -47,7 +47,6 @@ def retrieve_index_html() -> io.BytesIO | str:
         runtime().js_modules
         and line.strip() == "<!-- Inject web components modules (if needed) -->"
       ):
-        # READ the file content
         lines[i] = "\n".join(
           [
             f"<script type='module' nonce={g.csp_nonce} src='/{WEB_COMPONENTS_PATH_SEGMENT}{js_module}'></script>"

mesop/web/src/component_renderer/component_renderer.ts

@@ -161,6 +161,7 @@ export class ComponentRenderer {
       // and creating new children. In the future, this can be optimized
       // to be more performant, but this naive approach should have the
       // correct behavior, albeit inefficiently.
+      // See: https://github.com/google/mesop/issues/449
 
       // Clear existing children
       for (const element of Array.from(
@@ -296,26 +297,25 @@ export class ComponentRenderer {
       const customElementName = typeName
         .getFnName()!
         .slice(WEB_COMPONENT_PREFIX.length);
-      const customElement = document.createElement(customElementName);
-      this.customElement = customElement;
-      this.updateCustomElement(customElement);
+      this.customElement = document.createElement(customElementName);
+      this.updateCustomElement(this.customElement);
 
       for (const child of this.component.getChildrenList()) {
         const childElement = document.createElement(
           COMPONENT_RENDERER_ELEMENT_NAME,
         );
         (childElement as any)['component'] = child;
-        customElement.appendChild(childElement);
+        this.customElement.appendChild(childElement);
       }
 
       this.insertionRef.element.nativeElement.parentElement.appendChild(
-        customElement,
+        this.customElement,
       );
     } else {
       // Need to insert at insertionRef and *not* viewContainerRef, otherwise
       // the component (e.g. <mesop-text> will not be properly nested inside <component-renderer>).
       this._componentRef = this.insertionRef.createComponent(
-        componentClass, // If it's an unrecognized type, we assume it's a user-defined component
+        componentClass, // If it's an unrecognized type, we assume it's a user-defined / Python custom component
         options,
       );
       this.updateComponentRef();