Use `api.elements.define`

karma.conf.js

@@ -10,7 +10,6 @@ module.exports = function(config) {
     files: [
       { pattern: 'dist/*.js.map', included: false },
       { pattern: 'dist/*.css.map', included: false },
-      { pattern: "dist/icons.js", served: true },
       { pattern: "dist/emojis.js", served: true },
       "src/shared/tests/tests.css",
       "node_modules/lodash/lodash.min.js",

src/plugins/dragresize/components/dragresize.js

@@ -1,5 +1,6 @@
 import tpl_dragresize from "../templates/dragresize.js";
 import { CustomElement } from 'shared/components/element.js';
+import { api } from '@converse/headless/core.js';
 
 
 class ConverseDragResize extends CustomElement {
@@ -9,4 +10,4 @@ class ConverseDragResize extends CustomElement {
     }
 }
 
-customElements.define('converse-dragresize', ConverseDragResize);
+api.elements.define('converse-dragresize', ConverseDragResize);

src/shared/chat/toolbar.js

@@ -200,4 +200,4 @@ export class ChatToolbar extends CustomElement {
     }
 }
 
-window.customElements.define('converse-chat-toolbar', ChatToolbar);
+api.elements.define('converse-chat-toolbar', ChatToolbar);

src/shared/components/font-awesome.js

@@ -1,5 +1,6 @@
-import { CustomElement } from './element.js';
 import tpl_icons from '../templates/icons.js';
+import { CustomElement } from './element.js';
+import { api } from '@converse/headless/core.js';
 
 export class FontAwesome extends CustomElement {
     render () {  // eslint-disable-line class-methods-use-this
@@ -7,4 +8,4 @@ export class FontAwesome extends CustomElement {
     }
 }
 
-window.customElements.define('converse-fontawesome', FontAwesome);
+api.elements.define('converse-fontawesome', FontAwesome);

src/shared/components/icons.js

@@ -6,8 +6,9 @@
  * @license Mozilla Public License (MPLv2)
  */
 
-import { html } from 'lit';
 import { CustomElement } from './element.js';
+import { api } from '@converse/headless/core.js';
+import { html } from 'lit';
 
 import './styles/icon.scss';
 
@@ -51,4 +52,4 @@ class ConverseIcon extends CustomElement {
     }
 }
 
-customElements.define("converse-icon", ConverseIcon);
+api.elements.define("converse-icon", ConverseIcon);