Prevent errors from @CustomElement decorator being called several times on the same element (#127)

Author: leclairmael

src/gallery/index.ts

@@ -5,7 +5,6 @@ import { ManifestScreenshot } from '../types/types';
 import styles from './styles-gallery.scss';
 import template from './template-gallery';
 
-@customElement('pwa-gallery')
 export default class PWAGalleryElement extends LitElement {
 	@property({ type: Array }) screenshots: ManifestScreenshot[] = [];
 	@property() theme: 'default' | 'apple_desktop' | 'apple_mobile' = 'default';
@@ -95,3 +94,7 @@ export default class PWAGalleryElement extends LitElement {
         )}`;
 	}
 }
+
+if (!customElements.get('pwa-gallery')) {
+	customElements.define('pwa-gallery', PWAGalleryElement);
+}

src/index.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues, html } from 'lit';
 import { localized } from '@lit/localize';
-import { property, state, customElement } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { changeLocale, isRTL } from './localization';
 
 import { IRelatedApp, Manifest, IWindow, PWAInstallAttributes } from './types/types';
@@ -28,7 +28,6 @@ import templateApple from './templates/apple/template-apple';
  * @event {CustomEvent} pwa-install-gallery-event - App install gallery showed
  */
 @localized()
-@customElement('pwa-install')
 export class PWAInstallElement extends LitElement {
 	@property({attribute: 'manifest-url'}) manifestUrl = '/manifest.json';
 	@property() icon = '';
@@ -331,4 +330,8 @@ export class PWAInstallElement extends LitElement {
 	}
 }
 
+if (!customElements.get('pwa-install')) {
+	customElements.define('pwa-install', PWAInstallElement);
+}
+
 export { PWAInstallAttributes };

src/templates/chrome/bottom-sheet/index.ts

@@ -15,7 +15,6 @@ type IProps = {
 import template from './template-bottom-sheet';
 import Utils from '../../../utils';
 
-@customElement('pwa-bottom-sheet')
 export default class PWABottomSheetElement extends LitElement {
 	static get styles() {
 		return [stylesCommon, styles];
@@ -203,3 +202,7 @@ export default class PWABottomSheetElement extends LitElement {
         return html`${template(this.props.name, this.props.description, this.props.icon, this._callInstall, this.fallback, this.howToRequested)}`;
 	}
 }
+
+if (!customElements.get('pwa-bottom-sheet')) {
+	customElements.define('pwa-bottom-sheet', PWABottomSheetElement);
+}