translation overrides: Use the real tag name when looking for overrides

Instead of using the namespace which is hardcoded we use the tag name that was
used to register the element (or the "real" tag name in case of a scoped element).

This way if AppShell is regsitered as "dbp-some-app" it can still be overriden by
specifying "dbp-some-app" in the overrides object.

packages/common/i18next.js

@@ -100,20 +100,24 @@ export function createInstance(languages, lng, fallback, namespace) {
  * object is equal to removing all overrides.
  *
  * @param {i18next.i18n} i18n - The i18next instance
- * @param {object} overrides - The override data in the following format: "{language: {namespace: {key: value}}}"
+ * @param {HTMLElement} element - The element at which the overrides are targeted
+ * @param {object} overrides - The override data in the following format: "{language: {tag-name: {key: value}}}"
  */
-export function setOverrides(i18n, overrides) {
+export function setOverrides(i18n, element, overrides) {
     // We add a special namespace which gets used with priority and falls back
     // to the original one. This way we an change the overrides at runtime
     // and can even remove them.
+
+    // The scoped mixin saves the real tag name under data-tag-name
+    let tagName = ((element.dataset && element.dataset.tagName) || element.tagName).toLowerCase();
     let namespace = i18n.options.fallbackNS;
     let overrideNamespace = getOverrideNamespace(namespace);
     let hasOverrides = false;
     for(let lng of i18n.languages) {
         i18n.removeResourceBundle(lng, overrideNamespace);
-        if (overrides[lng] === undefined || overrides[lng][namespace] === undefined)
+        if (overrides[lng] === undefined || overrides[lng][tagName] === undefined)
             continue;
-        let resources = overrides[lng][namespace];
+        let resources = overrides[lng][tagName];
         hasOverrides = true;
         i18n.addResourceBundle(lng, overrideNamespace, resources);
     }

packages/common/test/i18next.js

@@ -49,22 +49,23 @@ suite('i18next', () => {
     });
 
     test('overrides', () => {
-        let namespace = 'ns';
+        let namespace = 'some-ns';
+        let element = document.createElement(namespace);
         var inst = i18next.createInstance({en:  {foo: 'bar'}}, 'en', 'en', namespace);
         assert.equal(inst.t('foo'), 'bar');
         assert.equal(inst.t('quux'), 'quux');
-        i18next.setOverrides(inst, {en: {[namespace]: {quux: 'bla'}}});
+        i18next.setOverrides(inst, element, {en: {[namespace]: {quux: 'bla'}}});
         assert.equal(inst.t('quux'), 'bla');
         assert.equal(inst.t('foo'), 'bar');
-        i18next.setOverrides(inst, {en: {[namespace]: {}}});
+        i18next.setOverrides(inst, element, {en: {[namespace]: {}}});
         assert.equal(inst.t('quux'), 'quux');
         assert.equal(inst.t('foo'), 'bar');
-        i18next.setOverrides(inst, {en: {[namespace]: {foo: 'hmm'}}});
+        i18next.setOverrides(inst, element, {en: {[namespace]: {foo: 'hmm'}}});
         assert.equal(inst.t('foo'), 'hmm');
-        i18next.setOverrides(inst, {en: {[namespace]: {quux: 'bla'}}});
+        i18next.setOverrides(inst, element, {en: {[namespace]: {quux: 'bla'}}});
         assert.equal(inst.t('foo'), 'bar');
         assert.equal(inst.t('quux'), 'bla');
-        i18next.setOverrides(inst, {});
+        i18next.setOverrides(inst, element, {});
         assert.equal(inst.t('foo'), 'bar');
         assert.equal(inst.t('quux'), 'quux');
     });

packages/language-select/src/dbp-language-select-demo.js

@@ -9,12 +9,12 @@ import {createInstance, setOverrides} from './i18n.js';
 // This is an example on how to override translations at runtime
 let OVERRIDES = {
     'de': {
-        'translation': {
+        'dbp-language-select-display': {
             'demo': 'Überschrieben'
         }
     },
     'en': {
-        'translation': {
+        'dbp-language-select-display': {
             'demo': 'Overridden'
         }
     }
@@ -26,7 +26,7 @@ class LanguageSelectDisplay extends AdapterLitElement {
         super();
         this.lang = 'de';
         this._i18n = createInstance();
-        setOverrides(this._i18n, OVERRIDES);
+        setOverrides(this._i18n, this, OVERRIDES);
     }
 
     static get properties() {