mebjas · bilal-elchami · Feb 8, 2023 · Feb 8, 2023 · Feb 8, 2023 · Feb 13, 2023
diff --git a/README.md b/README.md
@@ -84,9 +84,9 @@ We are working continuously on adding support for more and more platforms. If yo
 ### Framework support
 The library can be easily used with several other frameworks, I have been adding examples for a few of them and would continue to add more.
 
-|<img src="https://scanapp.org/assets/github_assets/html5.png" width="30px" />| <img src="https://scanapp.org/assets/github_assets/vuejs.png" width="30px" />|<img src="https://scanapp.org/assets/github_assets/electron.png" width="30px" /> | <img src="https://scanapp.org/assets/github_assets/react.svg" width="30px" /> | <img src="https://seeklogo.com/images/L/lit-logo-6B43868CDC-seeklogo.com.png" width="30px" />
-| -------- | -------- | -------- | -------- | -------- |
-| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](https://github.com/scanapp-org/html5-qrcode-react) | [Lit](./examples/lit)
+|<img src="https://scanapp.org/assets/github_assets/html5.png" width="30px" />| <img src="https://scanapp.org/assets/github_assets/vuejs.png" width="30px" />|<img src="https://scanapp.org/assets/github_assets/electron.png" width="30px" /> | <img src="https://scanapp.org/assets/github_assets/react.svg" width="30px" /> | <img src="https://seeklogo.com/images/L/lit-logo-6B43868CDC-seeklogo.com.png" width="30px" /> | <img src="https://pbs.twimg.com/profile_images/1511434207079407618/AwzUxnVf_400x400.png" height="30px" />
+| -------- | -------- | -------- | -------- | -------- | -------- |
+| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](https://github.com/scanapp-org/html5-qrcode-react) | [Lit](./examples/lit) | [Shadow DOM](./examples/html5-shadow-dom)
 
 ### Supported Code formats
 Code scanning is dependent on [Zxing-js](https://github.com/zxing-js/library) library. We will be working on top of it to add support for more types of code scanning. If you feel a certain type of code would be helpful to have, please file a feature request.

diff --git a/examples/html5-shadow-dom/README.md b/examples/html5-shadow-dom/README.md
@@ -0,0 +1,51 @@
+# html5-qrcode with HTML Element
+
+## Include the js library in your project
+```html
+<script src="https://unpkg.com/html5-qrcode"></script>
+```
+
+## Create the component in JavaScript
+```js
+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);
+```
+
+## 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");
+const html5QrCodeScanner = new Html5QrcodeScanner(childComponentQrReaderElement, {
+  fps: 10,
+  qrbox: 250,
+});
+html5QrCodeScanner.render(onScanSuccess);
+```
+
+### Contributors
+| Name | Profile|
+| ----- | ------ |
+| Bilal EL CHAMI | [@bilal-elchami](https://github.com/bilal-elchami) |
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>