Port to scoped elements

The demo now registers our web components lazily with a unique name
so that two different apps using the same underlying web compontens
don't clash.

This also disables auto registering and leaves that to the user.

packages/language-select/package.json

 {
   "name": "vpu-language-select",
   "version": "1.0.0",
-  "main": "src/vpu-language-select.js",
+  "main": "src/index.js",
   "devDependencies": {
     "karma": "^5.0.1",
     "karma-chai": "^0.1.0",
@@ -24,6 +24,7 @@
     "vpu-common": "file:./vendor/common"
   },
   "dependencies": {
+    "@open-wc/scoped-elements": "^1.0.8",
     "lit-element": "^2.2.1"
   },
   "scripts": {

packages/language-select/src/index.js

+import {LanguageSelect} from './vpu-language-select.js';
+
+export {LanguageSelect};
\ No newline at end of file

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

-import {html, LitElement, css} from 'lit-element';
-import './vpu-language-select.js';
+import {html, LitElement} from 'lit-element';
+import {LanguageSelect} from './vpu-language-select.js';
 import * as commonUtils from 'vpu-common/utils';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+
 
 class LanguageSelectDisplay extends LitElement {
 
@@ -35,14 +37,19 @@ class LanguageSelectDisplay extends LitElement {
     }
 }
 
-commonUtils.defineCustomElement('vpu-language-select-display', LanguageSelectDisplay);
-
-class LanguageSelectDemo extends LitElement {
+class LanguageSelectDemo extends ScopedElementsMixin(LitElement) {
 
     constructor() {
         super();
     }
 
+    static get scopedElements() {
+        return {
+          'vpu-language-select': LanguageSelect,
+          'vpu-language-select-display': LanguageSelectDisplay,
+        };
+      }
+
     render() {
         return html`
             Select 1: <vpu-language-select></vpu-language-select>

packages/language-select/src/vpu-language-select.js

 import {html, css, LitElement} from 'lit-element';
 import {i18n} from './i18n.js';
-import * as commonUtils from 'vpu-common/utils';
 import * as commonStyles from 'vpu-common/styles';
 
 /**
  * Emits a vpu-language-changed event where event.detail.lang is the new selected language
  */
-class LanguageSelect extends LitElement {
+export class LanguageSelect extends LitElement {
 
     constructor() {
         super();
@@ -131,6 +130,4 @@ class LanguageSelect extends LitElement {
             <a href="#" title="${linkTitle}" @click=${this.onClick}>${this.next.toUpperCase()}</a>
         `;
     }
-}
-
+}
\ No newline at end of file
-commonUtils.defineCustomElement('vpu-language-select', LanguageSelect);

packages/language-select/test/unit.js

-import '../src/vpu-language-select.js';
+import {LanguageSelect} from '../src/vpu-language-select.js';
+import * as commonUtils from 'vpu-common/utils';
 import '../src/demo.js';
 
+
+commonUtils.defineCustomElement('vpu-language-select', LanguageSelect);
+
 describe('vpu-language-select basics', () => {
   let node;
   let events = [];

common @ 0f626c7a

-Subproject commit 894bf3f1f7d8d2d2746c98bc24ff6a3fb82618b8
+Subproject commit 0f626c7a2051ec37606242d46f42d9790b6f0bcc