How to ensure the model cache size limit is set properly

[YokeshImersive]

This is my code to set model cache size to 0 based on other discussions, But the models are cached for up to default value of 5 models as it loading fast on second time. What am I doing wrong? Is there any way to find the cache values are assigned correctly? Thanks

<model-viewer
                                    id="reveal"
                                    class="modeldata"
                                    ar=""
                                    camera-controls=""
                                    loading="eager"
                                    touch-action="pan-y"
                                    poster="https://demo.3dxrapp.com/loadingscreen.webp"
                                    src=""
                                    shadow-intensity="1"
                                    ar-modes=" quick-look scene-viewer webxr"
                                    class="ar-view"
                                    style="display: block"
                                  >                                   
                                  </model-viewer>
                                  <script>
                                    const ModelViewerElement = customElements.get("model-viewer");
                                    ModelViewerElement.powerPreference = "low-power";
                                    ModelViewerElement.modelCacheSize = 0;
                                  </script>

[elalish]

Did you check for JS errors? My best guess is that your script is running before the MV library loads, so customElements.get("model-viewer") is undefined or something. There's even a web API to get an event when a particular custom element loads, which might be useful.

[YokeshImersive]

<model-viewer
                                    id="reveal"
                                    class="modeldata"
                                    ar=""
                                    camera-controls=""
                                    loading="eager"
                                    touch-action="pan-y"
                                    src=""
                                    shadow-intensity="1"
                                    ar-modes=" quick-look scene-viewer webxr"
                                    class="ar-view"
                                    style="display: block"
                                  >                                   
                                  </model-viewer>
                                  <script>
                                    document.addEventListener("DOMContentLoaded", () => {
                                      const modelViewerElement = customElements.get("model-viewer");
                                      if (modelViewerElement) {
                                        modelViewerElement.modelCacheSize = 0;
                                      }
                                    });
                                  </script>

Thanks now its working.

[YokeshImersive]

Given that I'm setting the source at runtime, I'll need to apply the same logic after setting the src attribute. Thus, in both my HTML and JavaScript, this approach is necessary for my situation.