Migrate all elements to be defined via elements-sk/define.
Change-Id: I634e3fc4e2eacc4cc46d089c500f57b45e122148
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/235000
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Reviewed-by: Eric Boren <borenet@google.com>
Reviewed-by: Ravi Mistry <rmistry@google.com>
Commit-Queue: Joe Gregorio <jcgregorio@google.com>
diff --git a/am/modules/alert-manager-sk/alert-manager-sk.js b/am/modules/alert-manager-sk/alert-manager-sk.js
index 289152a..0ab4e26 100644
--- a/am/modules/alert-manager-sk/alert-manager-sk.js
+++ b/am/modules/alert-manager-sk/alert-manager-sk.js
@@ -5,6 +5,7 @@
* The main application element for am.skia.org.
*
*/
+import { define } from 'elements-sk/define'
import 'elements-sk/checkbox-sk'
import 'elements-sk/error-toast-sk'
import 'elements-sk/icon/comment-icon-sk'
@@ -205,7 +206,7 @@
return ele;
}
-window.customElements.define('alert-manager-sk', class extends HTMLElement {
+define('alert-manager-sk', class extends HTMLElement {
constructor() {
super();
this._incidents = []; // All active incidents.
diff --git a/am/modules/email-chooser-sk/email-chooser-sk.js b/am/modules/email-chooser-sk/email-chooser-sk.js
index 0427154..8298657 100644
--- a/am/modules/email-chooser-sk/email-chooser-sk.js
+++ b/am/modules/email-chooser-sk/email-chooser-sk.js
@@ -10,6 +10,7 @@
*
*/
import dialogPolyfill from 'dialog-polyfill'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { $$ } from 'common-sk/modules/dom'
@@ -36,7 +37,7 @@
</div>
</dialog>`;
-window.customElements.define('email-chooser-sk', class extends HTMLElement {
+define('email-chooser-sk', class extends HTMLElement {
constructor() {
super();
this._resolve = null;
diff --git a/am/modules/incident-sk/incident-sk.js b/am/modules/incident-sk/incident-sk.js
index 29a78f0..8b333fa 100644
--- a/am/modules/incident-sk/incident-sk.js
+++ b/am/modules/incident-sk/incident-sk.js
@@ -51,6 +51,7 @@
* </pre>
*
*/
+import { define } from 'elements-sk/define'
import 'elements-sk/icon/delete-icon-sk'
import '../silence-sk'
@@ -181,7 +182,7 @@
</section>
`;
-window.customElements.define('incident-sk', class extends HTMLElement {
+define('incident-sk', class extends HTMLElement {
constructor() {
super();
this._silences = [];
diff --git a/am/modules/silence-sk/silence-sk.js b/am/modules/silence-sk/silence-sk.js
index bbc7905..617ccc9 100644
--- a/am/modules/silence-sk/silence-sk.js
+++ b/am/modules/silence-sk/silence-sk.js
@@ -68,6 +68,7 @@
* </pre>
*
*/
+import { define } from 'elements-sk/define'
import 'elements-sk/icon/delete-icon-sk'
import * as paramset from '../paramset'
@@ -150,7 +151,7 @@
</div>
`;
-window.customElements.define('silence-sk', class extends HTMLElement {
+define('silence-sk', class extends HTMLElement {
constructor() {
super();
this._incidents = [];
diff --git a/am/package.json b/am/package.json
index b825194..84a5c16 100644
--- a/am/package.json
+++ b/am/package.json
@@ -12,7 +12,7 @@
"@webcomponents/custom-elements": "~1.2.4",
"common-sk": "~3.2.4",
"dialog-polyfill": "^0.5.0",
- "elements-sk": "~2.9.4",
+ "elements-sk": "~3.0.1",
"html-webpack-inject-attributes-plugin": "^1.0.1",
"lit-html": "~1.1.2"
},
diff --git a/go/new_element/templates/file.js b/go/new_element/templates/file.js
index b3dd8e3..576837b 100644
--- a/go/new_element/templates/file.js
+++ b/go/new_element/templates/file.js
@@ -8,12 +8,13 @@
*
* @example
*/
-import { html, render } from 'lit-html'
+import { define } from 'elements-sk/define'
+import { html } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
const template = (ele) => html``;
-window.customElements.define('{{.ElementName}}', class extends ElementSk {
+define('{{.ElementName}}', class extends ElementSk {
constructor() {
super(template);
}
@@ -23,7 +24,4 @@
this._render();
}
- disconnectedCallback() {
- }
-
});
diff --git a/infra-sk/modules/ElementSk/ElementSk_test.js b/infra-sk/modules/ElementSk/ElementSk_test.js
index b272e4c..46509d0 100644
--- a/infra-sk/modules/ElementSk/ElementSk_test.js
+++ b/infra-sk/modules/ElementSk/ElementSk_test.js
@@ -1,3 +1,4 @@
+import { define } from 'elements-sk/define'
import { ElementSk } from './ElementSk.js'
import { html } from 'lit-html'
@@ -8,7 +9,7 @@
container.innerHTML = "";
});
-window.customElements.define('my-test-element-sk', class extends ElementSk {
+define('my-test-element-sk', class extends ElementSk {
constructor() {
super((ele) => html`<p>Hello World!</p>`);
assert.isNull(this.querySelector('p'));
diff --git a/infra-sk/modules/app-sk/app-sk.js b/infra-sk/modules/app-sk/app-sk.js
index ea08ea0..560bc71 100644
--- a/infra-sk/modules/app-sk/app-sk.js
+++ b/infra-sk/modules/app-sk/app-sk.js
@@ -36,6 +36,7 @@
* </app-sk>
*
*/
+import { define } from 'elements-sk/define'
import 'elements-sk/icon/menu-icon-sk'
const button_template = document.createElement('template');
button_template.innerHTML =`
@@ -45,7 +46,7 @@
</button>
`
-window.customElements.define('app-sk', class extends HTMLElement {
+define('app-sk', class extends HTMLElement {
connectedCallback() {
let header = this.querySelector('header');
let sidebar = this.querySelector('aside');
diff --git a/infra-sk/modules/confirm-dialog-sk/confirm-dialog-sk.js b/infra-sk/modules/confirm-dialog-sk/confirm-dialog-sk.js
index 311d2cc..043a391 100644
--- a/infra-sk/modules/confirm-dialog-sk/confirm-dialog-sk.js
+++ b/infra-sk/modules/confirm-dialog-sk/confirm-dialog-sk.js
@@ -22,6 +22,7 @@
* </script>
*
*/
+import { define } from 'elements-sk/define'
import dialogPolyfill from 'dialog-polyfill'
import { html, render } from 'lit-html'
@@ -36,7 +37,7 @@
</div>
</dialog>`;
-window.customElements.define('confirm-dialog-sk', class extends HTMLElement {
+define('confirm-dialog-sk', class extends HTMLElement {
constructor() {
super();
this._resolve = null;
diff --git a/infra-sk/modules/confirm-dialog-sk/confirm-dialog-sk_test.js b/infra-sk/modules/confirm-dialog-sk/confirm-dialog-sk_test.js
index 5e47a3d..2e3d410 100644
--- a/infra-sk/modules/confirm-dialog-sk/confirm-dialog-sk_test.js
+++ b/infra-sk/modules/confirm-dialog-sk/confirm-dialog-sk_test.js
@@ -49,9 +49,9 @@
container.innerHTML = `<confirm-dialog-sk></confirm-dialog-sk>`;
let dialog = container.firstElementChild;
- assert.equal($$('dialog-sk', dialog).hasAttribute('shown'), false);
+ assert.equal($$('dialog', dialog).hasAttribute('open'), false);
dialog.open('whatever');
- assert.equal($$('dialog-sk', dialog).hasAttribute('shown'), true);
+ assert.equal($$('dialog', dialog).hasAttribute('open'), true);
});
});
})
diff --git a/infra-sk/modules/login-sk/login-sk.js b/infra-sk/modules/login-sk/login-sk.js
index a1c1e37..c4b67c1 100644
--- a/infra-sk/modules/login-sk/login-sk.js
+++ b/infra-sk/modules/login-sk/login-sk.js
@@ -8,10 +8,11 @@
* {@linkcode module:elements-sk/error-toast-sk}.
* </p>
*/
+import { define } from 'elements-sk/define'
import { errorMessage } from 'elements-sk/errorMessage';
import { Login } from '../login';
-window.customElements.define('login-sk', class extends HTMLElement {
+define('login-sk', class extends HTMLElement {
connectedCallback() {
this.innerHTML = `<span class=email>Loading...</span><a class=logInOut></a>`;
Login.then(status => {
diff --git a/infra-sk/modules/sort-sk/sort-sk.js b/infra-sk/modules/sort-sk/sort-sk.js
index e700eea..42c752c 100644
--- a/infra-sk/modules/sort-sk/sort-sk.js
+++ b/infra-sk/modules/sort-sk/sort-sk.js
@@ -35,7 +35,8 @@
* @attr target - The id of the container element whose children are to be sorted.
*
*/
-import { html, render } from 'lit-html'
+import { define } from 'elements-sk/define'
+import { html } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import { $, $$ } from 'common-sk/modules/dom'
import 'elements-sk/icon/arrow-drop-down-icon-sk'
@@ -59,7 +60,7 @@
const f_num_up = (x, y) => (x.value - y.value);
const f_num_down = (x, y) => f_num_up(y, x);
-window.customElements.define('sort-sk', class extends ElementSk {
+define('sort-sk', class extends ElementSk {
connectedCallback() {
super.connectedCallback();
$('[data-key]', this).forEach((ele) => {
diff --git a/infra-sk/modules/systemd-unit-status-sk/systemd-unit-status-sk.js b/infra-sk/modules/systemd-unit-status-sk/systemd-unit-status-sk.js
index 99c573c..18cbce2 100644
--- a/infra-sk/modules/systemd-unit-status-sk/systemd-unit-status-sk.js
+++ b/infra-sk/modules/systemd-unit-status-sk/systemd-unit-status-sk.js
@@ -17,6 +17,7 @@
* }
* </pre>
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import 'elements-sk/styles/buttons'
@@ -33,7 +34,7 @@
<div class=service>${ele.value.status.Name}</div>
`;
-window.customElements.define('systemd-unit-status-sk', class extends HTMLElement {
+define('systemd-unit-status-sk', class extends HTMLElement {
constructor() {
super();
this._value = null;
diff --git a/infra-sk/modules/task-driver-sk/task-driver-sk.js b/infra-sk/modules/task-driver-sk/task-driver-sk.js
index 3bac9ea..9ce8a27 100644
--- a/infra-sk/modules/task-driver-sk/task-driver-sk.js
+++ b/infra-sk/modules/task-driver-sk/task-driver-sk.js
@@ -7,6 +7,7 @@
* </p>
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { $$ } from 'common-sk/modules/dom'
import { localeTime, strDuration } from 'common-sk/modules/human'
@@ -139,7 +140,7 @@
const template = (ele) => step(ele, ele.data);
-window.customElements.define('task-driver-sk', class extends HTMLElement {
+define('task-driver-sk', class extends HTMLElement {
constructor() {
super();
this._data = {};
diff --git a/infra-sk/package.json b/infra-sk/package.json
index 11fe977..6d0805b 100644
--- a/infra-sk/package.json
+++ b/infra-sk/package.json
@@ -8,7 +8,7 @@
"dependencies": {
"common-sk": "~3.1.0",
"dialog-polyfill": "^0.5.0",
- "elements-sk": "~2.7.0",
+ "elements-sk": "3.0.1",
"lit-html": "~0.14.0"
},
"devDependencies": {
diff --git a/jsdoc/package.json b/jsdoc/package.json
index 0d62244..a11e95b 100644
--- a/jsdoc/package.json
+++ b/jsdoc/package.json
@@ -1,7 +1,7 @@
{
"dependencies": {
"common-sk": "^3.2.4",
- "elements-sk": "~3.0.0",
+ "elements-sk": "3.0.1",
"jsdoc": "^3.6.3",
"webpack-cli": "^3.3.6"
}
diff --git a/jsfiddle/modules/canvaskit-fiddle/canvaskit-fiddle.js b/jsfiddle/modules/canvaskit-fiddle/canvaskit-fiddle.js
index f32a510..a2d2d61 100644
--- a/jsfiddle/modules/canvaskit-fiddle/canvaskit-fiddle.js
+++ b/jsfiddle/modules/canvaskit-fiddle/canvaskit-fiddle.js
@@ -1,4 +1,5 @@
import 'elements-sk/error-toast-sk'
+import { define } from 'elements-sk/define'
import { html } from 'lit-html'
import { SKIA_VERSION } from '../../build/version.js'
@@ -45,7 +46,7 @@
* </p>
*
*/
-window.customElements.define('canvaskit-fiddle', class extends WasmFiddle {
+define('canvaskit-fiddle', class extends WasmFiddle {
constructor() {
super(wasmPromise, template, 'CanvasKit', 'canvaskit');
diff --git a/jsfiddle/modules/pathkit-fiddle/pathkit-fiddle.js b/jsfiddle/modules/pathkit-fiddle/pathkit-fiddle.js
index 185cee5..64a8eea 100644
--- a/jsfiddle/modules/pathkit-fiddle/pathkit-fiddle.js
+++ b/jsfiddle/modules/pathkit-fiddle/pathkit-fiddle.js
@@ -1,4 +1,5 @@
import 'elements-sk/error-toast-sk'
+import { define } from 'elements-sk/define'
import { html } from 'lit-html'
import { SKIA_VERSION } from '../../build/version.js'
@@ -49,7 +50,7 @@
* </p>
*
*/
-window.customElements.define('pathkit-fiddle', class extends WasmFiddle {
+define('pathkit-fiddle', class extends WasmFiddle {
constructor() {
super(wasmPromise, template, 'PathKit', 'pathkit');
diff --git a/jsfiddle/package.json b/jsfiddle/package.json
index e07b513..c9d6777 100644
--- a/jsfiddle/package.json
+++ b/jsfiddle/package.json
@@ -2,7 +2,7 @@
"dependencies": {
"@webcomponents/custom-elements": "~1.2.0",
"common-sk": "~3.1.0",
- "elements-sk": "~2.7.0",
+ "elements-sk": "3.0.1",
"lit-html": "~1.0.0-rc.2"
},
"devDependencies": {
diff --git a/named-fiddles/modules/named-edit-sk/named-edit-sk.js b/named-fiddles/modules/named-edit-sk/named-edit-sk.js
index 3349d10..7aad8e4 100644
--- a/named-fiddles/modules/named-edit-sk/named-edit-sk.js
+++ b/named-fiddles/modules/named-edit-sk/named-edit-sk.js
@@ -17,6 +17,7 @@
* </pre>
*
*/
+import { define } from 'elements-sk/define'
import dialogPolyfill from 'dialog-polyfill'
import { html, render } from 'lit-html'
import { $$ } from 'common-sk/modules/dom'
@@ -34,7 +35,7 @@
</dialog>
`;
-window.customElements.define('named-edit-sk', class extends HTMLElement {
+define('named-edit-sk', class extends HTMLElement {
constructor() {
super();
this._state = {
diff --git a/named-fiddles/modules/named-fiddle-sk/named-fiddle-sk.js b/named-fiddles/modules/named-fiddle-sk/named-fiddle-sk.js
index b62a00b..7750aa4 100644
--- a/named-fiddles/modules/named-fiddle-sk/named-fiddle-sk.js
+++ b/named-fiddles/modules/named-fiddle-sk/named-fiddle-sk.js
@@ -14,6 +14,7 @@
* fiddle.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import 'elements-sk/styles/buttons'
@@ -32,7 +33,7 @@
<span class=user>${ele._state.user}</span>
`;
-window.customElements.define('named-fiddle-sk', class extends HTMLElement {
+define('named-fiddle-sk', class extends HTMLElement {
constructor() {
super();
this._state = {
diff --git a/named-fiddles/modules/named-fiddles-sk/named-fiddles-sk.js b/named-fiddles/modules/named-fiddles-sk/named-fiddles-sk.js
index 907f921..222076b 100644
--- a/named-fiddles/modules/named-fiddles-sk/named-fiddles-sk.js
+++ b/named-fiddles/modules/named-fiddles-sk/named-fiddles-sk.js
@@ -13,6 +13,7 @@
import 'elements-sk/spinner-sk'
import '../../../infra-sk/modules/login-sk'
import { $$ } from 'common-sk/modules/dom'
+import { define } from 'elements-sk/define'
import { errorMessage } from 'elements-sk/errorMessage'
import { html, render } from 'lit-html'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
@@ -36,7 +37,7 @@
<footer>
`;
-window.customElements.define('named-fiddles-sk', class extends HTMLElement {
+define('named-fiddles-sk', class extends HTMLElement {
constructor() {
super();
this._named_fiddles = [];
diff --git a/named-fiddles/package.json b/named-fiddles/package.json
index 0708eae..840e6c5 100644
--- a/named-fiddles/package.json
+++ b/named-fiddles/package.json
@@ -13,7 +13,7 @@
"chai": "^4.2.0",
"common-sk": "^3.1.0",
"dialog-polyfill": "^0.5.0",
- "elements-sk": "2.6.0",
+ "elements-sk": "3.0.1",
"karma": "^3.1.3",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
diff --git a/particles/modules/particles-config-sk/particles-config-sk.js b/particles/modules/particles-config-sk/particles-config-sk.js
index c41e10d..77bc05e 100644
--- a/particles/modules/particles-config-sk/particles-config-sk.js
+++ b/particles/modules/particles-config-sk/particles-config-sk.js
@@ -24,6 +24,7 @@
*
*/
import 'elements-sk/styles/buttons'
+import { define } from 'elements-sk/define'
import { errorMessage } from 'elements-sk/errorMessage'
import { html, render } from 'lit-html'
import { $$ } from 'common-sk/modules/dom'
@@ -156,4 +157,4 @@
}
};
-window.customElements.define('particles-config-sk', ParticlesConfigSk);
\ No newline at end of file
+define('particles-config-sk', ParticlesConfigSk);
diff --git a/particles/modules/particles-player-sk/particles-player-sk.js b/particles/modules/particles-player-sk/particles-player-sk.js
index 527069c..f6ba0fe 100644
--- a/particles/modules/particles-player-sk/particles-player-sk.js
+++ b/particles/modules/particles-player-sk/particles-player-sk.js
@@ -8,6 +8,7 @@
*
*/
import { $$ } from 'common-sk/modules/dom'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import 'elements-sk/spinner-sk'
@@ -47,7 +48,7 @@
</canvas>
</div>`;
-window.customElements.define('particles-player-sk', class extends HTMLElement {
+define('particles-player-sk', class extends HTMLElement {
constructor() {
super();
@@ -235,4 +236,4 @@
canvas.concat(matr);
}
-});
\ No newline at end of file
+});
diff --git a/particles/modules/particles-sk/particles-sk.js b/particles/modules/particles-sk/particles-sk.js
index c841b7b..fea240d 100644
--- a/particles/modules/particles-sk/particles-sk.js
+++ b/particles/modules/particles-sk/particles-sk.js
@@ -14,6 +14,7 @@
import 'elements-sk/styles/buttons'
import { $$ } from 'common-sk/modules/dom'
import { SKIA_VERSION } from '../../build/version.js'
+import { define } from 'elements-sk/define'
import { errorMessage } from 'elements-sk/errorMessage'
import { html, render } from 'lit-html'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
@@ -128,7 +129,7 @@
</footer>
`;
-window.customElements.define('particles-sk', class extends HTMLElement {
+define('particles-sk', class extends HTMLElement {
constructor() {
super();
this._state = {
diff --git a/particles/package.json b/particles/package.json
index 6e6ed0f..c2e7546 100644
--- a/particles/package.json
+++ b/particles/package.json
@@ -8,7 +8,7 @@
"@webcomponents/custom-elements": "^1.2.1",
"canvaskit-wasm": "0.4.1",
"common-sk": "~3.1.0",
- "elements-sk": "~2.7.0",
+ "elements-sk": "3.0.1",
"jsoneditor": "~5.24.3",
"lit-html": "~1.0.0"
},
diff --git a/perf/modules/alert-config-sk/alert-config-sk.js b/perf/modules/alert-config-sk/alert-config-sk.js
index 9a7c609..dcd4b43 100644
--- a/perf/modules/alert-config-sk/alert-config-sk.js
+++ b/perf/modules/alert-config-sk/alert-config-sk.js
@@ -5,6 +5,7 @@
* Control that allows editing an alert.Config.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
@@ -85,7 +86,7 @@
</select-sk>
`;
-window.customElements.define('alert-config-sk', class extends ElementSk {
+define('alert-config-sk', class extends ElementSk {
constructor() {
super(template);
this._paramset = {};
diff --git a/perf/modules/alerts-page-sk/alerts-page-sk.js b/perf/modules/alerts-page-sk/alerts-page-sk.js
index 65a2dec..4c6f376 100644
--- a/perf/modules/alerts-page-sk/alerts-page-sk.js
+++ b/perf/modules/alerts-page-sk/alerts-page-sk.js
@@ -12,6 +12,7 @@
import dialogPolyfill from 'dialog-polyfill'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import { Login } from '../../../infra-sk/modules/login.js'
+import { define } from 'elements-sk/define'
import { errorMessage } from 'elements-sk/errorMessage.js'
import { fromObject } from 'common-sk/modules/query'
import { html, render } from 'lit-html'
@@ -71,7 +72,7 @@
<checkbox-sk ?checked=${ele._showDeleted} @change=${ele._showChanged} label='Show deleted configs.'></checkbox-sk>
`;
-window.customElements.define('alerts-page-sk', class extends ElementSk {
+define('alerts-page-sk', class extends ElementSk {
constructor() {
super(template);
this._cfg = {};
diff --git a/perf/modules/algo-select-sk/algo-select-sk.js b/perf/modules/algo-select-sk/algo-select-sk.js
index ae36b72..e6eb5a5 100644
--- a/perf/modules/algo-select-sk/algo-select-sk.js
+++ b/perf/modules/algo-select-sk/algo-select-sk.js
@@ -10,6 +10,7 @@
* @attr {string} algo - The algorithm name.
*/
import 'elements-sk/select-sk'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import { $, $$ } from 'common-sk/modules/dom'
@@ -35,7 +36,7 @@
</select-sk>
`;
-window.customElements.define('algo-select-sk', class extends ElementSk {
+define('algo-select-sk', class extends ElementSk {
constructor() {
super(template);
}
diff --git a/perf/modules/cluster-lastn-page-sk/cluster-lastn-page-sk.js b/perf/modules/cluster-lastn-page-sk/cluster-lastn-page-sk.js
index f763bfc..c367d43 100644
--- a/perf/modules/cluster-lastn-page-sk/cluster-lastn-page-sk.js
+++ b/perf/modules/cluster-lastn-page-sk/cluster-lastn-page-sk.js
@@ -6,6 +6,7 @@
*/
import dialogPolyfill from 'dialog-polyfill'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
+import { define } from 'elements-sk/define'
import { errorMessage } from 'elements-sk/errorMessage'
import { fromObject } from 'common-sk/modules/query'
import { html } from 'lit-html'
@@ -175,7 +176,7 @@
${_table(ele)}
`;
-window.customElements.define('cluster-lastn-page-sk', class extends ElementSk {
+define('cluster-lastn-page-sk', class extends ElementSk {
constructor() {
super(template);
diff --git a/perf/modules/cluster-page-sk/cluster-page-sk.js b/perf/modules/cluster-page-sk/cluster-page-sk.js
index aaf29a3..61606bd 100644
--- a/perf/modules/cluster-page-sk/cluster-page-sk.js
+++ b/perf/modules/cluster-page-sk/cluster-page-sk.js
@@ -6,6 +6,7 @@
*
*/
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
+import { define } from 'elements-sk/define'
import { errorMessage } from 'elements-sk/errorMessage'
import { fromObject } from 'common-sk/modules/query'
import { html } from 'lit-html'
@@ -150,7 +151,7 @@
</div>
`;
-window.customElements.define('cluster-page-sk', class extends ElementSk {
+define('cluster-page-sk', class extends ElementSk {
constructor() {
super(template);
diff --git a/perf/modules/cluster-summary2-sk/cluster-summary2-sk.js b/perf/modules/cluster-summary2-sk/cluster-summary2-sk.js
index 42ae851..926ebef 100644
--- a/perf/modules/cluster-summary2-sk/cluster-summary2-sk.js
+++ b/perf/modules/cluster-summary2-sk/cluster-summary2-sk.js
@@ -33,6 +33,7 @@
*
* @example
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import 'elements-sk/styles/buttons'
import 'elements-sk/collapse-sk'
@@ -290,4 +291,4 @@
}
}
-window.customElements.define('cluster-summary2-sk', ClusterSummary2Sk);
+define('cluster-summary2-sk', ClusterSummary2Sk);
diff --git a/perf/modules/commit-detail-panel-sk/commit-detail-panel-sk.js b/perf/modules/commit-detail-panel-sk/commit-detail-panel-sk.js
index 9a28104..a388653 100644
--- a/perf/modules/commit-detail-panel-sk/commit-detail-panel-sk.js
+++ b/perf/modules/commit-detail-panel-sk/commit-detail-panel-sk.js
@@ -25,6 +25,7 @@
*
* @attr {Number} selected - The index of the selected commit.
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import { findParent } from 'common-sk/modules/dom'
@@ -45,7 +46,7 @@
</table>
`;
-window.customElements.define('commit-detail-panel-sk', class extends ElementSk {
+define('commit-detail-panel-sk', class extends ElementSk {
constructor() {
super(template);
this._details = [];
diff --git a/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk.js b/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk.js
index da02215..6da2e75 100644
--- a/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk.js
+++ b/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk.js
@@ -19,6 +19,7 @@
import '../commit-detail-panel-sk'
import 'elements-sk/styles/buttons'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import dialogPolyfill from 'dialog-polyfill'
@@ -45,7 +46,7 @@
</dialog>
`;
-window.customElements.define('commit-detail-picker-sk', class extends ElementSk {
+define('commit-detail-picker-sk', class extends ElementSk {
constructor() {
super(template);
this._details = [];
diff --git a/perf/modules/commit-detail-sk/commit-detail-sk.js b/perf/modules/commit-detail-sk/commit-detail-sk.js
index f9fba26..b174394 100644
--- a/perf/modules/commit-detail-sk/commit-detail-sk.js
+++ b/perf/modules/commit-detail-sk/commit-detail-sk.js
@@ -7,6 +7,7 @@
* The element takes as data a serialized cid.CommitDetail.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html';
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import { $$ } from 'common-sk/modules/dom.js';
@@ -21,7 +22,7 @@
<a href="${ele.cid.url}">Commit</a>
</div>`;
-window.customElements.define('commit-detail-sk', class extends ElementSk {
+define('commit-detail-sk', class extends ElementSk {
constructor() {
super(template);
this._cid = {};
diff --git a/perf/modules/day-range-sk/day-range-sk.js b/perf/modules/day-range-sk/day-range-sk.js
index f2e9316..148c0ac 100644
--- a/perf/modules/day-range-sk/day-range-sk.js
+++ b/perf/modules/day-range-sk/day-range-sk.js
@@ -15,6 +15,7 @@
*
* @example
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import 'elix/src/DateComboBox.js'
@@ -24,7 +25,7 @@
<label>End <elix-date-combo-box @date-changed=${ele._endChanged} .date=${new Date(ele.end * 1000)}></elix-date-combo-box></label>
`;
-window.customElements.define('day-range-sk', class extends ElementSk {
+define('day-range-sk', class extends ElementSk {
constructor() {
super(template);
}
diff --git a/perf/modules/domain-picker-sk/domain-picker-sk.js b/perf/modules/domain-picker-sk/domain-picker-sk.js
index 3fb9c22..98021ca 100644
--- a/perf/modules/domain-picker-sk/domain-picker-sk.js
+++ b/perf/modules/domain-picker-sk/domain-picker-sk.js
@@ -12,6 +12,7 @@
* @evt domain-changed - The event detail.state will contain the updated 'state'.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import dialogPolyfill from 'dialog-polyfill'
@@ -94,7 +95,7 @@
<button class=description @click=${ele._edit}>${_description(ele)}</button>
`;
-window.customElements.define('domain-picker-sk', class extends ElementSk {
+define('domain-picker-sk', class extends ElementSk {
constructor() {
super(template);
const now = Date.now();
diff --git a/perf/modules/explore-sk/explore-sk.js b/perf/modules/explore-sk/explore-sk.js
index aecb064..6d1868f 100644
--- a/perf/modules/explore-sk/explore-sk.js
+++ b/perf/modules/explore-sk/explore-sk.js
@@ -5,6 +5,7 @@
* Main page of Perf, for exploring data.
*/
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
+import { define } from 'elements-sk/define'
import { errorMessage } from 'elements-sk/errorMessage'
import { html, render } from 'lit-html'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
@@ -149,7 +150,7 @@
</div>
`;
-window.customElements.define('explore-sk', class extends ElementSk {
+define('explore-sk', class extends ElementSk {
constructor() {
super(template);
// Keep track of the data sent to plot.
diff --git a/perf/modules/json-source-sk/json-source-sk.js b/perf/modules/json-source-sk/json-source-sk.js
index 4fd598a..ff95427 100644
--- a/perf/modules/json-source-sk/json-source-sk.js
+++ b/perf/modules/json-source-sk/json-source-sk.js
@@ -7,6 +7,7 @@
* id.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import { $$ } from 'common-sk/modules/dom'
@@ -21,7 +22,7 @@
<pre>${ele._json}</pre>
`;
-window.customElements.define('json-source-sk', class extends ElementSk {
+define('json-source-sk', class extends ElementSk {
constructor() {
super(template);
this._json = '';
diff --git a/perf/modules/paramset-sk/paramset-sk.js b/perf/modules/paramset-sk/paramset-sk.js
index 3122e12..ec54943 100644
--- a/perf/modules/paramset-sk/paramset-sk.js
+++ b/perf/modules/paramset-sk/paramset-sk.js
@@ -35,6 +35,7 @@
* both clickable and clickable_values is unsupported.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
@@ -68,7 +69,7 @@
</table>
`;
-window.customElements.define('paramset-sk', class extends ElementSk {
+define('paramset-sk', class extends ElementSk {
constructor() {
super(template);
this._titles = [];
diff --git a/perf/modules/perf-scaffold-sk/perf-scaffold-sk.js b/perf/modules/perf-scaffold-sk/perf-scaffold-sk.js
index 851e473..be48de8 100644
--- a/perf/modules/perf-scaffold-sk/perf-scaffold-sk.js
+++ b/perf/modules/perf-scaffold-sk/perf-scaffold-sk.js
@@ -6,6 +6,7 @@
* every Perf page should be a child of this element.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import 'elements-sk/error-toast-sk'
@@ -52,7 +53,7 @@
Array.prototype.slice.call(from).forEach((ele) => to.appendChild(ele))
}
-window.customElements.define('perf-scaffold-sk', class extends ElementSk {
+define('perf-scaffold-sk', class extends ElementSk {
constructor() {
super(template);
this._main = null;
diff --git a/perf/modules/plot-simple-sk/plot-simple-sk.js b/perf/modules/plot-simple-sk/plot-simple-sk.js
index 1d5a19d..9c52cb3 100644
--- a/perf/modules/plot-simple-sk/plot-simple-sk.js
+++ b/perf/modules/plot-simple-sk/plot-simple-sk.js
@@ -35,6 +35,7 @@
* @attr height - The height of the element in px.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import { Chart } from 'chart.js'
@@ -65,7 +66,7 @@
<canvas width=${ele.width} height=${ele.height}></canvas>
`;
-window.customElements.define('plot-simple-sk', class extends ElementSk {
+define('plot-simple-sk', class extends ElementSk {
constructor() {
super(template);
}
diff --git a/perf/modules/query-chooser-sk/query-chooser-sk.js b/perf/modules/query-chooser-sk/query-chooser-sk.js
index 78c585f..e2ae4f1 100644
--- a/perf/modules/query-chooser-sk/query-chooser-sk.js
+++ b/perf/modules/query-chooser-sk/query-chooser-sk.js
@@ -12,6 +12,7 @@
* @attr {string} count_url - The URL to POST the query to, passed down to quuery-count-sk.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import 'elements-sk/styles/buttons'
@@ -29,7 +30,7 @@
</div>
`;
-window.customElements.define('query-chooser-sk', class extends ElementSk {
+define('query-chooser-sk', class extends ElementSk {
constructor() {
super(template);
this.current_query = '';
diff --git a/perf/modules/query-count-sk/query-count-sk.js b/perf/modules/query-count-sk/query-count-sk.js
index a4a2e89..8b1b7ba 100644
--- a/perf/modules/query-count-sk/query-count-sk.js
+++ b/perf/modules/query-count-sk/query-count-sk.js
@@ -12,6 +12,7 @@
* from the fetch response.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import { errorMessage } from 'elements-sk/errorMessage'
@@ -25,7 +26,7 @@
</div>
`;
-window.customElements.define('query-count-sk', class extends ElementSk {
+define('query-count-sk', class extends ElementSk {
constructor() {
super(template);
this._last_query = '';
diff --git a/perf/modules/query-sk/query-sk.js b/perf/modules/query-sk/query-sk.js
index ffb5b60..4bbbccb 100644
--- a/perf/modules/query-sk/query-sk.js
+++ b/perf/modules/query-sk/query-sk.js
@@ -14,6 +14,7 @@
* @attr {string} current_query - The current query formatted as a URL formatted query string.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import '../query-values-sk'
@@ -44,7 +45,7 @@
// The delay in ms before sending a delayed query-change event.
const DELAY_MS = 500;
-window.customElements.define('query-sk', class extends ElementSk {
+define('query-sk', class extends ElementSk {
constructor() {
super(template);
this._paramset = {};
diff --git a/perf/modules/query-summary-sk/query-summary-sk.js b/perf/modules/query-summary-sk/query-summary-sk.js
index 27004b3..3183e9a 100644
--- a/perf/modules/query-summary-sk/query-summary-sk.js
+++ b/perf/modules/query-summary-sk/query-summary-sk.js
@@ -10,6 +10,7 @@
*
*/
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { toParamSet } from 'common-sk/modules/query'
@@ -21,7 +22,7 @@
}
}
-window.customElements.define('query-summary-sk', class extends ElementSk {
+define('query-summary-sk', class extends ElementSk {
constructor() {
super(template);
}
diff --git a/perf/modules/query-values-sk/query-values-sk.js b/perf/modules/query-values-sk/query-values-sk.js
index 6956998..1f611f7 100644
--- a/perf/modules/query-values-sk/query-values-sk.js
+++ b/perf/modules/query-values-sk/query-values-sk.js
@@ -9,6 +9,7 @@
* changed. The selection is available in e.detail.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import 'elements-sk/checkbox-sk'
@@ -32,7 +33,7 @@
</multi-select-sk>
`;
-window.customElements.define('query-values-sk', class extends ElementSk {
+define('query-values-sk', class extends ElementSk {
constructor() {
super(template);
this._options = [];
diff --git a/perf/modules/triage-page-sk/triage-page-sk.js b/perf/modules/triage-page-sk/triage-page-sk.js
index 867a462..d78338f 100644
--- a/perf/modules/triage-page-sk/triage-page-sk.js
+++ b/perf/modules/triage-page-sk/triage-page-sk.js
@@ -7,6 +7,7 @@
*/
import dialogPolyfill from 'dialog-polyfill'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
+import { define } from 'elements-sk/define'
import { equals, deepCopy } from 'common-sk/modules/object'
import { errorMessage } from 'elements-sk/errorMessage.js'
import { fromObject } from 'common-sk/modules/query'
@@ -219,7 +220,7 @@
</template>
`;
-window.customElements.define('triage-page-sk', class extends ElementSk {
+define('triage-page-sk', class extends ElementSk {
constructor() {
super(template);
const now = Math.floor(Date.now()/1000);
diff --git a/perf/modules/triage-status-sk/triage-status-sk.js b/perf/modules/triage-status-sk/triage-status-sk.js
index 097e178..26807a8 100644
--- a/perf/modules/triage-status-sk/triage-status-sk.js
+++ b/perf/modules/triage-status-sk/triage-status-sk.js
@@ -10,6 +10,7 @@
* alert, cluster_type, full_summary, and triage.
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import '../tricon2-sk'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
@@ -20,7 +21,7 @@
</button>
`;
-window.customElements.define('triage-status-sk', class extends ElementSk {
+define('triage-status-sk', class extends ElementSk {
constructor() {
super(template);
this._triage= {
diff --git a/perf/modules/triage2-sk/triage2-sk.js b/perf/modules/triage2-sk/triage2-sk.js
index 1466181..64af9ce 100644
--- a/perf/modules/triage2-sk/triage2-sk.js
+++ b/perf/modules/triage2-sk/triage2-sk.js
@@ -13,6 +13,7 @@
* @example
* <triage2-sk value=positive></triage2-sk>
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html';
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import 'elements-sk/icon/check-circle-icon-sk';
@@ -34,7 +35,7 @@
</button>
`;
-window.customElements.define('triage2-sk', class extends ElementSk {
+define('triage2-sk', class extends ElementSk {
constructor() {
super(template);
}
diff --git a/perf/modules/tricon2-sk/tricon2-sk.js b/perf/modules/tricon2-sk/tricon2-sk.js
index d01f671..45c1c67 100644
--- a/perf/modules/tricon2-sk/tricon2-sk.js
+++ b/perf/modules/tricon2-sk/tricon2-sk.js
@@ -8,6 +8,7 @@
* "untriaged", "positive", or "negative".
*
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import 'elements-sk/icon/check-circle-icon-sk';
@@ -26,7 +27,7 @@
}
}
-window.customElements.define('tricon2-sk', class extends ElementSk {
+define('tricon2-sk', class extends ElementSk {
constructor() {
super(template);
}
diff --git a/perf/modules/word-cloud-sk/word-cloud-sk.js b/perf/modules/word-cloud-sk/word-cloud-sk.js
index 2c418dd..bebd90a 100644
--- a/perf/modules/word-cloud-sk/word-cloud-sk.js
+++ b/perf/modules/word-cloud-sk/word-cloud-sk.js
@@ -7,6 +7,7 @@
*
* @example
*/
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
@@ -75,7 +76,7 @@
return ret;
}
-window.customElements.define('word-cloud-sk', class extends ElementSk {
+define('word-cloud-sk', class extends ElementSk {
constructor() {
super(template);
this._items = [];
diff --git a/perf/package.json b/perf/package.json
index 18685b4..3c01e34 100644
--- a/perf/package.json
+++ b/perf/package.json
@@ -20,7 +20,7 @@
"common-sk": "^3.2.4",
"cssmin": "",
"dialog-polyfill": "^0.5.0",
- "elements-sk": "2.9.5",
+ "elements-sk": "3.0.1",
"elix": "^6.0.4",
"eslint": "^6.1.0",
"karma": "~3.1.4",
diff --git a/power/modules/power-index-sk/power-index-sk.js b/power/modules/power-index-sk/power-index-sk.js
index 3d7226e..49915a6 100644
--- a/power/modules/power-index-sk/power-index-sk.js
+++ b/power/modules/power-index-sk/power-index-sk.js
@@ -5,6 +5,7 @@
import { diffDate } from 'common-sk/modules/human'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
// How often to update the data.
@@ -112,7 +113,7 @@
// Methods:
// None
//
-window.customElements.define('power-index-sk', class extends HTMLElement {
+define('power-index-sk', class extends HTMLElement {
constructor() {
super();
diff --git a/power/package.json b/power/package.json
index 3299b28..2205d5a 100644
--- a/power/package.json
+++ b/power/package.json
@@ -5,7 +5,7 @@
"license": "",
"dependencies": {
"common-sk": "^3.1.0",
- "elements-sk": "^2.6.2",
+ "elements-sk": "3.0.1",
"lit-html": "~0.14.0"
},
"devDependencies": {
diff --git a/pulld/modules/pulld-app-sk/pulld-app-sk.js b/pulld/modules/pulld-app-sk/pulld-app-sk.js
index 4d1fbb0..d4ac0aa 100644
--- a/pulld/modules/pulld-app-sk/pulld-app-sk.js
+++ b/pulld/modules/pulld-app-sk/pulld-app-sk.js
@@ -1,3 +1,4 @@
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import 'elements-sk/error-toast-sk'
@@ -41,7 +42,7 @@
// Methods:
// None
//
-window.customElements.define('pulld-app-sk', class extends HTMLElement {
+define('pulld-app-sk', class extends HTMLElement {
constructor() {
super();
diff --git a/pulld/package.json b/pulld/package.json
index be65ac3..f52f372 100644
--- a/pulld/package.json
+++ b/pulld/package.json
@@ -9,7 +9,7 @@
"license": "BSD",
"dependencies": {
"common-sk": "^3.1.0",
- "elements-sk": "^2.6.0",
+ "elements-sk": "3.0.1",
"lit-html": "~0.14.0"
},
"devDependencies": {
diff --git a/push/modules/push-app-sk/push-app-sk.js b/push/modules/push-app-sk/push-app-sk.js
index 6899e20..58990c1 100644
--- a/push/modules/push-app-sk/push-app-sk.js
+++ b/push/modules/push-app-sk/push-app-sk.js
@@ -16,6 +16,7 @@
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
import { stateReflector } from 'common-sk/modules/stateReflector'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import '../push-selection-sk'
@@ -270,4 +271,4 @@
}
-window.customElements.define('push-app-sk', PushAppSk);
+define('push-app-sk', PushAppSk);
diff --git a/push/modules/push-selection-sk/push-selection-sk.js b/push/modules/push-selection-sk/push-selection-sk.js
index 3b8ad0c..ffb9ccb 100644
--- a/push/modules/push-selection-sk/push-selection-sk.js
+++ b/push/modules/push-selection-sk/push-selection-sk.js
@@ -1,4 +1,5 @@
import dialogPolyfill from 'dialog-polyfill'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import 'elements-sk/icon/check-icon-sk'
@@ -125,4 +126,4 @@
}
-window.customElements.define('push-selection-sk', PushSelectionSk);
+define('push-selection-sk', PushSelectionSk);
diff --git a/push/package.json b/push/package.json
index 3533367..1d1bd54 100644
--- a/push/package.json
+++ b/push/package.json
@@ -7,7 +7,7 @@
"dependencies": {
"common-sk": "~3.1.0",
"dialog-polyfill": "^0.5.0",
- "elements-sk": "~2.6.2",
+ "elements-sk": "3.0.1",
"lit-html": "~0.14.0"
},
"devDependencies": {
diff --git a/skottie/modules/skottie-config-sk/skottie-config-sk.js b/skottie/modules/skottie-config-sk/skottie-config-sk.js
index b2c61bf..cc6d8ab 100644
--- a/skottie/modules/skottie-config-sk/skottie-config-sk.js
+++ b/skottie/modules/skottie-config-sk/skottie-config-sk.js
@@ -26,6 +26,7 @@
*
*/
import 'elements-sk/styles/buttons'
+import { define } from 'elements-sk/define'
import { errorMessage } from 'elements-sk/errorMessage'
import { html, render } from 'lit-html'
import { $$ } from 'common-sk/modules/dom'
@@ -249,4 +250,4 @@
}
};
-window.customElements.define('skottie-config-sk', SkottieConfigSk);
+define('skottie-config-sk', SkottieConfigSk);
diff --git a/skottie/modules/skottie-drive-sk/skottie-drive-sk.js b/skottie/modules/skottie-drive-sk/skottie-drive-sk.js
index 5e645d2..2ba18f0 100644
--- a/skottie/modules/skottie-drive-sk/skottie-drive-sk.js
+++ b/skottie/modules/skottie-drive-sk/skottie-drive-sk.js
@@ -28,6 +28,7 @@
import 'elements-sk/error-toast-sk'
import { $$ } from 'common-sk/modules/dom'
import { SKIA_VERSION } from '../../build/version.js'
+import { define } from 'elements-sk/define'
import { errorMessage } from 'elements-sk/errorMessage'
import { html, render } from 'lit-html'
import { until } from 'lit-html/directives/until.js';
@@ -80,7 +81,7 @@
</footer>
`;
-window.customElements.define('skottie-drive-sk', class extends HTMLElement {
+define('skottie-drive-sk', class extends HTMLElement {
constructor() {
super();
diff --git a/skottie/modules/skottie-embed-sk/skottie-embed-sk.js b/skottie/modules/skottie-embed-sk/skottie-embed-sk.js
index 3a8ea64..5c5ae5b 100644
--- a/skottie/modules/skottie-embed-sk/skottie-embed-sk.js
+++ b/skottie/modules/skottie-embed-sk/skottie-embed-sk.js
@@ -16,12 +16,13 @@
* </iframe>
*/
import '../skottie-player-sk'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
const template = (ele) => html`<skottie-player-sk></skottie-player-sk>`;
-window.customElements.define('skottie-embed-sk', class extends HTMLElement {
+define('skottie-embed-sk', class extends HTMLElement {
constructor() {
super();
}
diff --git a/skottie/modules/skottie-inline-sk/skottie-inline-sk.js b/skottie/modules/skottie-inline-sk/skottie-inline-sk.js
index edc975b..dad959e 100644
--- a/skottie/modules/skottie-inline-sk/skottie-inline-sk.js
+++ b/skottie/modules/skottie-inline-sk/skottie-inline-sk.js
@@ -23,9 +23,10 @@
* </skottie-inline-sk>
*/
import '../skottie-player-sk'
+import { define } from 'elements-sk/define'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
-window.customElements.define('skottie-inline-sk', class extends HTMLElement {
+define('skottie-inline-sk', class extends HTMLElement {
static get observedAttributes() {
return ['width', 'height', 'src'];
}
diff --git a/skottie/modules/skottie-player-sk/skottie-player-sk.js b/skottie/modules/skottie-player-sk/skottie-player-sk.js
index 662d6a3..6ebbd84 100644
--- a/skottie/modules/skottie-player-sk/skottie-player-sk.js
+++ b/skottie/modules/skottie-player-sk/skottie-player-sk.js
@@ -12,6 +12,7 @@
import 'elements-sk/icon/play-arrow-icon-sk'
import 'elements-sk/icon/settings-icon-sk'
import 'elements-sk/spinner-sk'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { repeat } from 'lit-html/directives/repeat';
@@ -108,7 +109,7 @@
},
}).ready();
-window.customElements.define('skottie-player-sk', class extends HTMLElement {
+define('skottie-player-sk', class extends HTMLElement {
constructor() {
super();
diff --git a/skottie/modules/skottie-sk/skottie-sk.js b/skottie/modules/skottie-sk/skottie-sk.js
index a1cc1d1..f553110 100644
--- a/skottie/modules/skottie-sk/skottie-sk.js
+++ b/skottie/modules/skottie-sk/skottie-sk.js
@@ -15,6 +15,7 @@
import { $$ } from 'common-sk/modules/dom'
import { SKIA_VERSION } from '../../build/version.js'
import { errorMessage } from 'elements-sk/errorMessage'
+import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
import { setupListeners, onUserEdit, reannotate} from '../lottie-annotations'
@@ -187,7 +188,7 @@
</footer>
`;
-window.customElements.define('skottie-sk', class extends HTMLElement {
+define('skottie-sk', class extends HTMLElement {
constructor() {
super();
this._state = {
diff --git a/skottie/package.json b/skottie/package.json
index 5f67953..3b34611 100644
--- a/skottie/package.json
+++ b/skottie/package.json
@@ -8,7 +8,7 @@
"@webcomponents/custom-elements": "^1.2.1",
"canvaskit-wasm": "0.5.0",
"common-sk": "~3.1.0",
- "elements-sk": "~2.7.0",
+ "elements-sk": "3.0.1",
"jsoneditor": "~5.24.3",
"lit-html": "~1.0.0",
"lottie-web": "^5.4.3"
diff --git a/status/webpack/package.json b/status/webpack/package.json
index 1ecaa06..cc2be86 100644
--- a/status/webpack/package.json
+++ b/status/webpack/package.json
@@ -6,7 +6,7 @@
"license": "Apache 2.0",
"dependencies": {
"common-sk": "^3.2.0",
- "elements-sk": "^2.7.3",
+ "elements-sk": "3.0.1",
"lit-html": "^1.1.1"
},
"devDependencies": {
diff --git a/task_driver/package.json b/task_driver/package.json
index 36eaafe..0999275 100644
--- a/task_driver/package.json
+++ b/task_driver/package.json
@@ -6,7 +6,7 @@
"license": "Apache 2.0",
"dependencies": {
"common-sk": "^3.2.0",
- "elements-sk": "^2.7.3",
+ "elements-sk": "3.0.1",
"lit-html": "^1.1.1"
},
"devDependencies": {
