Disable style on model load

[lilyntalmers]

Hey,

I am using model-viewer in GatsbyJS. This is what the code looks like

<model-viewer
 src="https://modelviewer.dev/shared-assets/models/reflective-sphere.gltf" alt="A 3D model of an astronaut"
 ar ar-modes="webxr scene-viewer quick-look"
 ar-scale="auto" quick-look-browsers="safari chrome"
 ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz" loading="eager" 
 poster="https://modelviewer.dev/assets/poster-astronaut.png" autoplay camera-controls
>
 <button id="my_ar_button" class="my_ar_button" slot="ar-button">Show AR</button>
</model-viewer>

I am using this CSS for the button

.my_ar_button {
 display: none;
}

I want this CSS to be disabled when the model is completely loaded so I can view the button.

In plain HTML website I used to use this Vanilla JavaScript code

<script>
 const modelViewer = document.querySelector("model-viewer");
 const button = document.getElementById("my_ar_button");
 modelViewer.addEventListener("load", function() {
 button.style.display = "block";
 });
</script>

So, how can I disable CSS .my_ar_button {display: none;} after the model is completely loaded?

[Js-Brecht]

Can try

button.classList.remove("my_ar_button");

I would probably add a new css class to make the purpose more clear, semantically:

.no-display {
  display: none;
}

<button id="my_ar_button" class="my_ar_button no-display" slot="ar-button">Show AR</button>

 modelViewer.addEventListener("load", function() {
   button.classList.remove("no-display");
 });

This way you can still use my_ar_button to style your button, and it will be easy to turn off the display: none.

Compatibility: https://www.caniuse.com/?search=classList
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList