Objects Passed Between Components Are Proxied

Objects that are passed between components in different namespaces or into the global DOM can have compatibility issues. To maintain namespace isolation and reduce incompatibility, LWS uses proxy wrappers around the objects. When LWS attempts to unwrap the values, it’s sometimes unsuccessful. You can see in the browser console that the values are null or proxied, for example.

Similarly, custom events fired by a component with detail values that are intended for a browser extension cross the component sandbox boundary, so LWS proxies them. The browser extension can receive null detail values because of the proxy wrapper.

To avoid issues related to proxies, pass values as JSON strings and parse them later.

In this example, the component in namespace foo serializes event data into JSON strings. The component in namespace bar parses the data before handling.

See Also

Performance Considerations with LWS