packages/provider/src/i18n/de/translation.json

 {
-  "de": "Deutsch",
-  "en": "Englisch",
-
   "demo": {
     "provider": "Anbieter",
     "consumer": "Verbraucher",
@@ -13,4 +10,4 @@
     "price": "Preis",
     "sum": "Summe"
   }
-}
\ No newline at end of file
+}

packages/provider/src/i18n/en/translation.json

 {
-  "de": "German",
-  "en": "English",
-
   "demo": {
     "provider": "Provider",
     "consumer": "Consumer",
@@ -13,4 +10,4 @@
     "price": "Price",
     "sum": "sum"
   }
-}
\ No newline at end of file
+}

packages/qr-code-scanner/i18next-scanner.config.js

@@ -6,6 +6,7 @@ module.exports = {
     options: {
         debug: false,
         removeUnusedKeys: true,
+        func: {list: ['i18n.t', '_i18n.t']},
         lngs: ['en','de'],
         resource: {
             loadPath: 'src/i18n/{{lng}}/{{ns}}.json',

packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js

-import {i18n} from './i18n';
+import {createInstance} from './i18n';
 import {css, html, LitElement} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from '@dbp-toolkit/common/utils';
@@ -8,7 +8,8 @@ import {QrCodeScanner} from './qr-code-scanner.js';
 export class QrCodeScannerDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
     }
 
     static get scopedElements() {
@@ -23,12 +24,11 @@ export class QrCodeScannerDemo extends ScopedElementsMixin(LitElement) {
         };
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-        i18n.changeLanguage(this.lang);
-
-        this.updateComplete.then(()=>{
-        });
+    update(changedProperties) {
+        if (changedProperties.has("lang")) {
+            this._i18n.changeLanguage(this.lang);
+        }
+        super.update(changedProperties);
     }
 
     static get styles() {

packages/qr-code-scanner/src/i18n.js

-import {createInstance} from '@dbp-toolkit/common/i18next.js';
+import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
 
 import de from './i18n/de/translation.json';
 import en from './i18n/en/translation.json';
 
-export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
+export function createInstance() {
+    return _createInstance({en: en, de: de}, 'de', 'en');
+}
\ No newline at end of file

packages/qr-code-scanner/src/i18n/de/translation.json

 {
   "no-camera-access": "Zugriff auf Kamera nicht möglich.",
   "check-access": "Bitte stellen Sie sicher, dass eine Webcam oder Kamera aktiviert ist und überprüfen Sie ob Ihr Browser die notwendigen Berechtigungen besitzt.",
-  "finished-scan": "Scannen abgeschlossen.",
   "loading-video": "Video laden ...",
   "no-qr-detected": "Kein QR-Code erkannt.",
   "no-support": "Ihr Browser unterstützt keine Videoaufnahmen.",

packages/qr-code-scanner/src/i18n/en/translation.json

 {
   "no-camera-access": "Unable to access video stream.",
   "check-access": "Please make sure that a webcam or camera is activated and check whether your browser has the necessary authorizations.",
-  "finished-scan": "Finished scanning.",
   "loading-video": "⌛ Loading video...",
   "no-qr-detected": "No QR code detected.",
   "no-support": "Your browser does not support video recording.",

packages/qr-code-scanner/src/qr-code-scanner.js

-import {i18n} from './i18n';
+import {createInstance} from './i18n';
 import {css, html, unsafeCSS} from 'lit-element';
 import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
 import * as commonStyles from '@dbp-toolkit/common/styles';
@@ -33,9 +33,10 @@ function getPrimaryDevice(devices) {
  *
  * Moreimportant devices first.
  *
+ * @param i18n
  * @returns {Map<string,string>} the map of devices
  */
-async function getVideoDevices() {
+async function getVideoDevices(i18n) {
     let devices_map = new Map();
     if (navigator.mediaDevices
         && navigator.mediaDevices.enumerateDevices
@@ -135,7 +136,8 @@ class QRScanner {
 export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
 
         this._askPermission = false;
         this._loading = false;
@@ -181,9 +183,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
 
     async connectedCallback() {
         super.connectedCallback();
-        i18n.changeLanguage(this.lang);
 
-        let devices = await getVideoDevices();
+        let devices = await getVideoDevices(this._i18n);
         this._activeCamera = getPrimaryDevice(devices) || '';
         this._devices = devices;
 
@@ -209,7 +210,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case "lang":
-                    i18n.changeLanguage(this.lang);
+                    this._i18n.changeLanguage(this.lang);
                     break;
             }
         });
@@ -232,6 +233,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
     }
 
     async _startScanning() {
+        const i18n = this._i18n;
         console.assert(this._lock.isLocked());
         await this.updateComplete;
 
@@ -488,6 +490,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
     }
 
     render() {
+        const i18n = this._i18n;
         let hasDevices = this._devices.size > 0;
         let showCanvas = this._videoRunning && !this._askPermission && !this._loading;
         let noSupportString = checkIosMobileSupport(this._devices) ? i18n.t('no-ios-support') : i18n.t('no-support');

packages/typescript-example/src/i18n.ts

-import {createInstance} from '@dbp-toolkit/common/i18next.js';
+import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
 
 import de from './i18n/de/translation.json';
 import en from './i18n/en/translation.json';
 
-export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
+export function createInstance() {
+    return _createInstance({en: en, de: de}, 'de', 'en');
+}
\ No newline at end of file

packages/typescript-example/src/typescript-example.ts

-import {html,LitElement,property} from 'lit-element';
-import {i18n} from './i18n';
+import {html,LitElement} from 'lit-element';
+import {createInstance} from './i18n';
 
 export class TypeScriptExample extends LitElement {
 
@@ -8,20 +8,20 @@ export class TypeScriptExample extends LitElement {
     constructor() {
         super();
 
-        this._i18n = i18n.cloneInstance();
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
     }
 
-    @property({type: String})
-    lang = '';
+    static get properties() {
+        return {
+          lang: {type: String}
+        };
+    }
 
     update(changedProperties) {
-        changedProperties.forEach((oldValue, propName) => {
-            switch (propName) {
-                case "lang":
-                    this._i18n.changeLanguage(this.lang);
-                    break;
-            }
-        });
+        if (changedProperties.has("lang")) {
+            this._i18n.changeLanguage(this.lang);
+        }
         super.update(changedProperties);
     }