Custom Component Shadow DOM not fully loaded on "componentOnReady" promise / "arcgisReady" event

[Insa_bel]

We are in the process of migrating our ArcGIS widgets to the new web components - within our large Angular 21 application. 

As we have many custom project requirements, we are making some custom DOM changes to the custom components like TimeSlider, Sketch, Editor or FeatureTable. These changes include for example adding actions to the component DOM. With currently no slots being available, we do not see alternative options to manually altering the components' shadowDOM after the component finished rendering. 

The problem we are facing is that we do not know how to properly await the time when the component truly finished rendering, meaning that also the shadowDOM finished rendering (for the first time or after changes). We tried awaiting the "componentOnReady" promise and reacting to the "arcgisReady" event, but both options do not work, as the shadowDOM does not seem to be fully rendered at this point. It does seem to exist, but is mostly empty, so that the elements we search for cannot be found yet.

Our current workaround is to use a MutationObserver to observe the shadowDOM and wait for the elements we need to appear within this shadowDOM. This is not a very elegant or efficient solution though.

Are there any alternative approaches? Or potential reasons why the shadowDOM is not fully loaded although the docs say that the component should be ready to be interacted with at that point:

[AnneFitz]

---

As we have many custom project requirements, we are making some custom DOM changes to the custom components like TimeSlider, Sketch, Editor or FeatureTable. These changes include for example adding actions to the component DOM. With currently no slots being available, we do not see alternative options to manually altering the components' shadowDOM after the component finished rendering. 

---

Hi @Insa_bel -- could you please share more information about what type of customization is needed and where you are adding custom content in these components? (screenshots would be helpful). We're working on gathering requirements to support slots in these components in the future. Thanks 🙂

[Insa_bel]

Hi @AnneFitz , here are the places where we currently need to manipulate the ShadowDOM for custom components that were previously Widgets (with screeshots):

Timeslider:
Connecting Popovers to set the start and end time of the timeslider:

Sketch:
Extending the sketch with custom actions, but not when the sub menus (for polygon/polyline) are opened:

FeatureTable:
We are inserting custom actions into the action-bar above the feature-table. Also, we need a select-all button (because we only have small amounts of rows per table). This is the hardest adjustment for us currently, because the table is steadily loading and overwriting our manual ShadowDOM manipulations to hide the not-used select-all button (you already make invisble) and to add out custom select-all button. We currently have no solution for this, so this is a screenshot of our not yet migrated version using the FeatureTable widget (hiding our application data):

Do you maybe have any idea how to insert such a usable select-all button or is there even a functionality like this planned for the FeatureTable?

[AnneFitz]

@Insa_bel Thank you so much for these examples (and the screenshots). Really helps us better understand the use cases for these slots / custom content. 

For the Time Slider popovers - are these just used to configure the start and end values of the Time Slider?

Custom actions in Sketch and Feature Table make sense - we'll look into this 😊
For the select-all button in Feature Table, we can see the use case especially for smaller layer types. We don't have any immediate plans to add this, but will look into it as well. 

[ReneRubalcava]

As Anne mentioned, if you can provide feedback on what your level of customization is, that would help us with our planned work.

On knowing when things are done, it gets a little tricky component to component.

• componentOnReady promise lets you know the component has been initialized and rendered once, fully loaded. This doesn't mean it's done loading though. A component like TimeSlider is still gathering info from the layers and map and could update again. It's useful to know when default values are assigned or when you can use methods on a component.
• arcgisReady event lets you know that the component has a reference to the underlying view rendering the map. Meaning it can now communicate with the map. But again, it doesn't mean that the component is done working and could update its UI.

One option is to listen for the arcgisPropertyChange event and check for when the state property changes to ready. You can try this to see if it has done rendering with all the data that it needs.

timeSlider.addEventListener("arcgisPropertyChange", (event) => {
	// Check for state change
	if (event.detail.name === "state") {
		console.log("Property change name: ", event.detail.name);
		console.log("Property change value: ", event.target[event.detail.name]);
		// if state is "ready", try checking for UI changes
	}
});

Demo: https://codepen.io/odoe/pen/NPRVxzO?editors=1000

[Insa_bel]

Hi @ReneRubalcava ,

thanks a lot for your suggestion!

I tried the approach with listening to "arcgisPropertyChange" by editing your CodePen example to print the shadowDOM-part that we need for our manipulation and it seems to work:
https://codepen.io/insabelter/pen/yyadryp?editors=1000

When trying to replicate this in our Angular 21 application, this event is not fired though:

The only printed event change after opening the component is for the "effectiveStops". There is no event being logged in our case for the state change to "ready". This might be due to the Angular lifecycle somehow interfering with the event because we bind the custom component properties directly to signals which are updated based on our configuration??

Do you maybe have any idea what might cause the component to not trigger the event for the state change to "ready"?

[ReneRubalcava]

Maybe it's a settings somewhere. I used our create CLI to make this angular app and I can get the ready state.

Here is a github repo, maybe something in the angular.json can help? I'm not an Angular expert, so can't say for sure.

https://github.com/odoe/arcgis-angular-lifecycle/blob/main/src/app/app.html