Add HTML comments with key name to dbp-translation

packages/common/dbp-common-demo.js

@@ -304,6 +304,7 @@ html {
                     <div class="control" id="dbp-translation-demo">
                         <dbp-translation key="toolkit-showcase" subscribe="lang, lang-dir"></dbp-translation>
                         <dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-dir" unsafe></dbp-translation>
+                        <dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation>
                     </div>
                 </div>
             </section>

packages/common/src/translation.js

@@ -10,6 +10,7 @@ export class Translation extends DBPLitElement {
         this.lang = '';
         this.interpolation = '';
         this.langDir = '';
+        this.unsafe = false;
     }
 
     static get properties() {
@@ -44,7 +45,7 @@ export class Translation extends DBPLitElement {
       // create i18n instance with given translations
       this._i18n = createInstanceGivenResources(en, de);
 
-      // after init of overrides rerender page
+      // after init of overrides re-render page
       let local = this;
       if (this.langDir) {
         setOverridesByFile(this._i18n, this, this.langDir).then(function(response) {
@@ -77,8 +78,17 @@ export class Translation extends DBPLitElement {
             return this._i18n.t(this.key);
         })();
 
+        // if translation == "", key was not found
+        let key = "";
+        if (translation != "") {
+          key = unsafeHTML("<!-- key: " + this.key + "-->");
+        } else {
+          key = unsafeHTML("<!-- key: " + this.key + " not found! -->");
+        }
+
         // load translation text
         return html`
+            ${key}
             ${translation}
         `;
     }