Web Components API

Note: Web components were previously launched under the labs namespace (i.e. import mesop.lab as mel). As part of the v1 release, all of the web component APIs are now exposed in the main mesop namespace (i.e. import mesop as me). You can continue to use the labs namespace for the web components API until v2 (which will happen much later).

Example usage:

import mesop as me

@me.web_component(...)
def a_web_component():
    me.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] | 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.

PARAMETER	DESCRIPTION
name	A name can be specified for named slots. Multiple named slots in a composite component must use unique names. TYPE: str DEFAULT: ''