Calcite elements in custom widget - but Shadow DOM only correct after unrelated map Popup was shown

[GertConradie]

I created a custom widget that use the same Calcite elements and structure that is being used in the default LayerList widget. (calcite-flow > calcite-flow-item > calcite-list > calcite-list-item)

Note the custom widget is located an "Expand" widget, so it is only visible when expanded.

The default shadow DOM are not being created when I load the widget and start to use it.

Any time after the use/open of a map Popup widget the shadow DOM of my custom widget is created (the shadow DOM look like as what one would fine in the default LayerList widget) and display properly.

Are there something I must do/trigger/wait for something to complete when my custom widget render?

I suspect the hydration did not happen correctly/at all initially when I just open my custom widget and it is not clear to me how to trigger that from a custom widget.

As usual, any advice would be much appreciated. 

[GertConradie · Accepted solution]

Ok, got it sorted by looking at the Popup source code ( the best manual to read 😉 )

// inherited widget method (same as postInitialize(), initialize() etc)
loadDependencies() {

		// componentsUtils = "esri/chunks/componentsUtils" (not in the TypeScript typings by default.)
    return componentsUtils.loadCalciteComponents({

        flow: () => new Promise((a, b) => require(['esri/chunks/calcite-flow'], a)),
        'flow-item': () => new Promise((a, b) => require(['esri/chunks/calcite-flow-item'], a)),
        list: () => new Promise((a, b) => require(['esri/chunks/calcite-list'], a)),
        'list-item': () => new Promise((a, b) => require(['esri/chunks/calcite-list-item'], a)),
        'action-menu': () => new Promise((a, b) => require(['esri/chunks/calcite-action-menu'], a)),
        'action-group': () => new Promise((a, b) => require(['esri/chunks/calcite-action-group'], a)),
        action: () => new Promise((a, b) => require(['esri/chunks/calcite-action'], a)),
        icon: () => new Promise((a, b) => require(['esri/chunks/calcite-icon'], a)),

        button: () => new Promise((a, b) => require(['esri/chunks/calcite-button'], a)),
        notice: () => new Promise((a, b) => require(['esri/chunks/calcite-notice'], a)),
        tooltip: () => new Promise((a, b) => require(['esri/chunks/calcite-tooltip'], a))

    });
}