| 
|
| 
| 
-| -------- | -------- | -------- | -------- | -------- |
-| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](https://github.com/scanapp-org/html5-qrcode-react) | [Lit](./examples/lit)
+|| | | | | 
+| -------- | -------- | -------- | -------- | -------- | -------- |
+| [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
new file mode 100644
index 0000000..f5bc525
--- /dev/null
+++ b/examples/html5-shadow-dom/README.md
@@ -0,0 +1,51 @@
+# html5-qrcode with HTML Element
+
+## Include the js library in your project
+```html
+
+```
+
+## 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) |
\ No newline at end of file
diff --git a/examples/html5-shadow-dom/index.html b/examples/html5-shadow-dom/index.html
new file mode 100644
index 0000000..9ce0964
--- /dev/null
+++ b/examples/html5-shadow-dom/index.html
@@ -0,0 +1,67 @@
+
+
+
+ This method call would result in callback being triggered by the - * qrcode library. This method also handles the border coloring. - * - * @returns true if scan match is found, false otherwise. - */ + + /** + * Scans current context using the qrcode library. + * + *
This method call would result in callback being triggered by the
+ * qrcode library. This method also handles the border coloring.
+ *
+ * @returns true if scan match is found, false otherwise.
+ */
private scanContext(
- qrCodeSuccessCallback: QrcodeSuccessCallback,
- qrCodeErrorCallback: QrcodeErrorCallback
- ): Promise