Fix shadow dom support without removing the video element inside shadow dom

[Switcherfaiz]

It removes my video element inside shadow dom and append it to the body tag,make it update the video tag inside shadow dom without disrupting my shadow dom sructure

import QrScanner from '/qr-scanner/qr-scanner.min.js';

class scanningWindow extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.render();
}

scanningFunctionality() {
    const video = this.shadowRoot.querySelector('#camera');
    if (!video) {
        console.error('Video element not found in Shadow DOM');
        return;
    }

    // Set the WORKER_PATH if required
    QrScanner.WORKER_PATH = '/qr-scanner/qr-scanner-worker.min.js';

    // Create a QR Scanner instance
    const qrScanner = new QrScanner(video, (result) => {
        console.log('QR Code Content:', result);
        alert(`QR Code Scanned: ${result}`);
    });

    // Start the scanner
    qrScanner.start();
}

render() {
    this.shadowRoot.innerHTML = `
    ${this.styleSheet()}
    <!-- Video Element for Camera Stream -->
    <video id="camera"></video>
    `;
}

connectedCallback() {
    this.scanningFunctionality();
}

styleSheet() {
    return (`
    <style>
        :host {
            display: block;
            height: 100%;
            width: 100%;
        }
        #camera {
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }
    </style>
    `);
}

}

customElements.define('scanning-window',scanningWindow);