create-component-with-popup

To create a web component popup that fetches data on demand, you apply a Shadow DOM popup mixin and trigger data fetching only when the popup opens. This prevents the page from preloading detail data, loading contextual information exclusively when the popup is triggered.

The best way to isolate popup rendering is using Shadow DOM, which keeps the popup component's styles and DOM separate from the main page. This ensures the popup content renders independently without CSS or DOM conflicts.

You integrate ECharts or Tabulator into an on-demand popup by applying their respective mixins to the Shadow DOM component. These pluggable visualization mixins enable rich popup content like charts and tables, provided you call destroyPopup() for cleanup.

Yes, you need to manually clean up Shadow DOM popup components by calling destroyPopup() in the before-destroy lifecycle hook. This mandatory cleanup prevents memory leaks when removing interactive popup components from the web runtime.

Yes, you can use datasetInfo to define data fetching for RENOBIT runtime UI widgets like 3D scene widgets. The component uses datasetInfo as the fetch definition for Wkit.fetchData, retrieving contextual popup data only when the widget triggers the popup.

If your on-demand popup component preloads data, it likely lacks proper event-triggered fetching logic. You must wire the component to execute Wkit.fetchData using datasetInfo exclusively when the popup is shown, rather than loading data during initial component initialization.