Start porting to scoped elements

packages/app-shell/package.json

@@ -29,6 +29,7 @@
     "vpu-person-profile": "file:./vendor/person-profile"
   },
   "dependencies": {
+    "@open-wc/scoped-elements": "^1.0.8",
     "i18next": "^19.4.1",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.2",

packages/app-shell/src/build-info.js

 import {html, LitElement, css} from 'lit-element';
-import * as commonUtils from 'vpu-common/utils';
 import * as commonStyles from 'vpu-common/styles';
 import buildinfo from 'consts:buildinfo';
 
-class VPUBuildInfo extends LitElement {
+export class BuildInfo extends LitElement {
 
     constructor() {
         super();
@@ -33,6 +32,4 @@ class VPUBuildInfo extends LitElement {
             </a>
         `;
     }
-}
-
-commonUtils.defineCustomElement('vpu-build-info', VPUBuildInfo);
+}
\ No newline at end of file

packages/app-shell/src/index.js

 import {createI18nInstance} from './i18n.js';
 import {html, css, LitElement} from 'lit-element';
-import 'vpu-language-select';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {LanguageSelect} from 'vpu-language-select';
 import 'vpu-common/vpu-button.js';
 import 'vpu-auth';
 import 'vpu-notification';
@@ -10,8 +11,8 @@ import buildinfo from 'consts:buildinfo';
 import {classMap} from 'lit-html/directives/class-map.js';
 import {Router} from './router.js';
 import * as events from 'vpu-common/events.js';
-import './build-info.js';
-import './tugraz-logo.js';
+import {BuildInfo} from './build-info.js';
+import {TUGrazLogo} from './tugraz-logo.js';
 import {send as notify} from 'vpu-notification';
 import {userProfileMeta} from './vpu-app-shell-user-profile.js';
 import {appWelcomeMeta} from './vpu-app-shell-welcome.js';
@@ -41,8 +42,7 @@ const importNotify = async (promise) => {
     }
 };
 
-
-class VPUApp extends LitElement {
+class VPUApp extends ScopedElementsMixin(LitElement) {
     constructor() {
         super();
         this.lang = i18n.language;
@@ -62,6 +62,18 @@ class VPUApp extends LitElement {
         this._attrObserver = new MutationObserver(this.onAttributeObserved);
     }
 
+    static get scopedElements() {
+        return {
+          'vpu-language-select': LanguageSelect,
+          'vpu-tugraz-logo': TUGrazLogo,
+          'vpu-build-info': BuildInfo,
+          // https://github.com/open-wc/open-wc/issues/1541
+          'vpu-auth': customElements.get('vpu-auth'),
+          'vpu-notification': customElements.get('vpu-notification'),
+          'vpu-icon': customElements.get('vpu-icon'),
+        };
+      }
+
     onAttributeObserved(mutationsList, observer) {
         for(let mutation of mutationsList) {
             if (mutation.type === 'attributes') {

packages/app-shell/src/tugraz-logo.js

 import {html, LitElement, css} from 'lit-element';
-import * as commonUtils from 'vpu-common/utils';
 import * as commonStyles from 'vpu-common/styles';
 import {createI18nInstance} from './i18n.js';
 
 const i18n = createI18nInstance();
 
-class VPUTUGrazLogo extends LitElement {
+export class TUGrazLogo extends LitElement {
 
     constructor() {
         super();
@@ -77,6 +76,4 @@ class VPUTUGrazLogo extends LitElement {
             </a>
         `;
     }
-}
-
-commonUtils.defineCustomElement('vpu-tugraz-logo', VPUTUGrazLogo);
+}
\ No newline at end of file

packages/app-shell/src/vpu-app-shell-user-profile.js

@@ -2,20 +2,26 @@ import {createI18nInstance} from './i18n.js';
 import {css, html, LitElement} from 'lit-element';
 import * as commonUtils from 'vpu-common/utils';
 import * as commonStyles from 'vpu-common/styles';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import 'vpu-person-profile';
 
 const i18n = createI18nInstance();
 
-class AppShellUserProfile extends LitElement {
+class AppShellUserProfile extends ScopedElementsMixin(LitElement) {
 
     constructor() {
         super();
         this.lang = i18n.language;
         this._personId = window.VPUPersonId;
         this.entryPointUrl = commonUtils.getAPiUrl();
-
     }
 
+    static get scopedElements() {
+        return {
+          'vpu-person-profile': customElements.get('vpu-person-profile'),
+        };
+      }
+
     static get properties() {
         return {
             lang: { type: String },

packages/app-shell/src/vpu-app-shell-welcome.js

 import {createI18nInstance} from './i18n.js';
 import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from 'vpu-common/utils';
 import * as commonStyles from 'vpu-common/styles';
 
 const i18n = createI18nInstance();
 
-class AppShellWelcome extends LitElement {
+class AppShellWelcome extends ScopedElementsMixin(LitElement) {
 
     constructor() {
         super();

language-select @ f6797279

-Subproject commit 9a3c9052ed1809b302d2738e6aa3da7e4d29b819
+Subproject commit f6797279a5f00dfe4db52e44f1e016aedeec6a6d