AFrame: is there a way to reload scene with different components?

Question

I have the following scene defined with AR.js:

<a-scene vr-mode-ui='enabled: false'
             embedded
             arjs-webcam-texture>
    <a-camera rotation-reader
              gps-camera></a-camera>
    <!-- some a-entities-->
</a-scene>

Basically what I want is to remove AR.js components and add some entities to pure AFrame scene WITHOUT reloading page. Is it possible? I tried this way, but everything gets white and nothing happens after:

    const scene = document.querySelector('a-scene')
    scene.removeAttribute('arjs-webcam-texture');
    scene.setAttribute('fog')
    const camera = document.querySelector('a-camera')
    camera.removeAttribute('gps-camera');
    document.querySelectorAll('a-entity').forEach(e => {
        e.parentNode.removeChild(e);
    });

    const box = document.createElement('a-box');
    box.setAttribute('rotation', '0 45 45')
    box.setAttribute('scale', '2 2 2')
    box.setAttribute('position', '0 2 -3')
    box.setAttribute('color', 'green')

    scene.appendChild(box);

Answer 1

I don't have the stackoverflow reputation to comment, and am unsure if this is a complete answer. However, seeing as nobody has answered this for months, I'm going to say something that might be the solution in case anybody else reads this question.

Say the script that runs is called script.js

 <script src="script.js" defer></script>

Include the defer so that way there aren't issues with null exceptions as Aframes renders