Web Components API

Note: Web components are a new experimental feature released under labs and may have breaking changes.

Example usage:

import mesop.labs as mel


@mel.web_component(...)
def a_web_component():
    mel.insert_web_component(...)

API

web_component

A decorator for defining a web component.

This decorator is used to define a web component. It takes a path to the JavaScript file of the web component and an optional parameter to skip validation. It then registers the JavaScript file in the runtime.

PARAMETER	DESCRIPTION
path	The path to the JavaScript file of the web component. TYPE: str
skip_validation	If set to True, skips validation. Defaults to False. TYPE: bool DEFAULT: False

insert_web_component

Inserts a web component into the current component tree.

PARAMETER	DESCRIPTION
name	The name of the web component. This should match the custom element name defined in JavaScript. TYPE: str
events	A dictionary where the key is the event name, which must match a web component property name defined in JavaScript. The value is the event handler (callback) function. Keys must not be "src", "srcdoc", or start with "on" to avoid web security risks. TYPE: dict[str, Callable[[WebEvent], Any]] | None DEFAULT: None
properties	A dictionary where the key is the web component property name that's defined in JavaScript and the value is the property value which is plumbed to the JavaScript component. Keys must not be "src", "srcdoc", or start with "on" to avoid web security risks. TYPE: dict[str, Any] | None DEFAULT: None
key	A unique identifier for the web component. Defaults to None. TYPE: str | None DEFAULT: None

WebEvent dataclass

Bases: MesopEvent

An event emitted by a web component.

ATTRIBUTE	DESCRIPTION
value	The value associated with the web event. TYPE: Any
key	key of the component that emitted this event. TYPE: str

slot

This function is used when defining a content component to mark a place in the component tree where content can be provided by a child component.