mebjas · bilal-elchami · Feb 8, 2023 · Feb 8, 2023 · Feb 8, 2023 · Feb 13, 2023
diff --git a/README.md b/README.md
@@ -295,7 +295,7 @@ Find more information about this at [developers.google.com](https://developers.g
 
 And in JavaScript code initialize the object and attach listener like this:
 ```js
-const html5QrCode = new Html5Qrcode(/* element id */ "reader");
+const html5QrCode = new Html5Qrcode(/* element id or HTML Element*/ "reader");
 // File based scanning
 const fileinput = document.getElementById('qr-input-file');
 fileinput.addEventListener('change', e => {
@@ -579,6 +579,14 @@ class Html5Qrcode {
    */
   constructor(elementId: string, config:  Html5QrcodeFullConfig | undefined);
 
+  /**
+   * Initialize QR Code scanner.
+   * 
+   * @param element - The HTML DOM element.
+   * @param verbose - optional configuration object
+   */
+  constructor(element: HTMLElement, config:  Html5QrcodeFullConfig | undefined);
+
   /**
    * Start scanning QR codes or barcodes for a given camera.
    * 
@@ -715,6 +723,18 @@ class Html5QrcodeScanner {
     config: Html5QrcodeScannerConfig | undefined,
     verbose: boolean | undefined);
 
+  /**
+   * Creates instance of this class.
+   *
+   * @param element The HTML DOM element.
+   * @param config Extra configurations to tune the code scanner.
+   * @param verbose - If true, all logs would be printed to console. 
+   */
+  public constructor(
+    element: HTMLElement,
+    config: Html5QrcodeScannerConfig | undefined,
+    verbose: boolean | undefined);
+
   /**
    * Renders the User Interface.
    * 

diff --git a/examples/html5-shadow-dom/README.md b/examples/html5-shadow-dom/README.md
@@ -0,0 +1,15 @@
+# html5-qrcode without any external frameworks
+
+## Include the js library in your project
+```html
+<script src="https://unpkg.com/html5-qrcode"></script>
+```
+
+## Query an HTML element from DOM or Shadow DOM and pass it to the library
+
+```js
+const myCustomComponent = document.querySelector('custom-component');
+const childComponentQrReaderElement = myCustomComponent.shadowRoot.querySelector('div.qr-reader')
+var html5QrCodeScanner = new Html5QrcodeScanner(childComponentQrReaderElement, { fps: 10, qrbox: 250 });
+html5QrCodeScanner.render(onScanSuccess);
+```
diff --git a/examples/html5-shadow-dom/index.html b/examples/html5-shadow-dom/index.html
@@ -0,0 +1,67 @@
+<html>
+
+<head>
+    <title>Html-Qrcode Demo</title>
+
+<body>
+    <h1>This is a Shadow Dom example</h1>
+    <custom-component></custom-component>
+</body>
+<script src="/html5-qrcode.min.js"></script>
+<script>
+    // Create a class for the element
+    class CustomComponent extends HTMLElement {
+        constructor() {
+            // Always call super first in constructor
+            super();
+
+            // Create a shadow root
+            const shadow = this.attachShadow({ mode: 'open' });
+
+            // Create elements
+            const wrapper = document.createElement('div');
+            const title = document.createElement('h2');
+            title.innerText = 'HTML5 qr-code Scanner with shadow dom components';
+            const idReader = document.createElement('div');
+            idReader.className = 'qr-reader';
+            idReader.style.width = '500px';
+            wrapper.appendChild(title);
+            wrapper.appendChild(idReader);
+            // Attach the created elements to the shadow dom
+            shadow.appendChild(wrapper);
+        }
+    }
+
+    // Define the new element
+    customElements.define('custom-component', CustomComponent);
+
+    function docReady(fn) {
+        // see if DOM is already available
+        if (document.readyState === "complete"
+            || document.readyState === "interactive") {
+            // call on next available tick
+            setTimeout(fn, 1);
+        } else {
+            document.addEventListener("DOMContentLoaded", fn);
+        }
+    }
+
+    docReady(function () {
+        var lastResult, countResults = 0;
+        function onScanSuccess(decodedText, decodedResult) {
+            if (decodedText !== lastResult) {
+                ++countResults;
+                lastResult = decodedText;
+                // Handle on success condition with the decoded message.
+                console.log(`Scan result ${decodedText}`, decodedResult);
+            }
+        }
+        const myCustomComponent = document.querySelector('custom-component');
+        const childComponentQrReaderElement = myCustomComponent.shadowRoot.querySelector('div.qr-reader')
+        var html5QrCodeScanner = new Html5QrcodeScanner(childComponentQrReaderElement, { fps: 10, qrbox: 250 });
+        html5QrCodeScanner.render(onScanSuccess);
+    });
+</script>
+</head>
+
+</html>
diff --git a/minified/html5-qrcode.min.js b/minified/html5-qrcode.min.js