Guard against duplicate custom element registration

src/components/canvas/Section/SectionImg.ts

@@ -1,14 +1,14 @@
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 
 import { JSXCustomElement } from '../../../types/jsx-custom-element.type';
+import { safeCustomElement } from '@/lib/safe-custom-element';
 
 export interface SectionImgAttributes {
   text?: 'light' | 'dark';
   layout?: 'nested' | 'default';
 }
 
-@customElement('evg-section-img')
+@safeCustomElement('evg-section-img')
 export class SectionImg extends LitElement {
   static readonly properties = {
     treatment: { type: String, reflect: true, default: 'dark' },

src/components/canvas/Supergraphic/Supergraphic.ts

@@ -1,16 +1,16 @@
 import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
 import { JSXCustomElement } from '../../../types/jsx-custom-element.type';
+import { safeCustomElement } from '@/lib/safe-custom-element';
 
 import globe from './globe.svg?raw';
 
 export interface SupergraphicAttributes {
   position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 
-@customElement('evg-supergraphic')
+@safeCustomElement('evg-supergraphic')
 export class Supergraphic extends LitElement {
   position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 

src/components/composition/App/App.ts

@@ -1,13 +1,13 @@
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 
 import { JSXCustomElement } from '../../../types/jsx-custom-element.type';
+import { safeCustomElement } from '@/lib/safe-custom-element';
 
 export interface AppAttributes {
   header?: 'sticky';
 }
 
-@customElement('evg-app')
+@safeCustomElement('evg-app')
 export class App extends LitElement {
   static readonly properties = {
     header: { type: String, reflect: true },

src/components/composition/Collapse/Collapse.ts

@@ -1,13 +1,14 @@
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
+import { safeCustomElement } from '@/lib/safe-custom-element';
 import { JSXCustomElement } from '@/types/jsx-custom-element.type';
 
 export interface CollapseAttributes {
   open?: boolean;
 }
 
-@customElement('evg-collapse')
+@safeCustomElement('evg-collapse')
 export class Collapse extends LitElement {
   @property({ reflect: true, type: Boolean }) open?: boolean;
 

src/components/composition/Enter/Enter.ts

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 
 import { JSXCustomElement } from '../../../types/jsx-custom-element.type';
+import { safeCustomElement } from '@/lib/safe-custom-element';
 
 import { HtmlBoolean } from 'src/types/html-boolean.type';
 
@@ -15,7 +15,7 @@ export interface EnterAttributes {
   fill?: HtmlBoolean;
 }
 
-@customElement('evg-enter')
+@safeCustomElement('evg-enter')
 export class Enter extends LitElement {
   private observer?: IntersectionObserver;
   static readonly properties = {

src/components/composition/Sticky/Sticky.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
 
+import { safeCustomElement } from '@/lib/safe-custom-element';
 import { HtmlBoolean } from '@/types/html-boolean.type';
 import { JSXCustomElement } from '@/types/jsx-custom-element.type';
 
@@ -9,7 +9,7 @@ export interface StickyAttributes {
   top?: string;
 }
 
-@customElement('evg-sticky')
+@safeCustomElement('evg-sticky')
 export class Sticky extends LitElement {
   static readonly properties = {
     top: {

src/components/content/Icon/Icon.ts

@@ -1,8 +1,8 @@
 import { LitElement, html, nothing, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
 import { JSXCustomElement } from '../../../types/jsx-custom-element.type';
+import { safeCustomElement } from '@/lib/safe-custom-element';
 
 import {
   icons,
@@ -18,7 +18,7 @@ export interface IconAttributes {
   set?: 'default' | 'functional' | 'distinctive';
 }
 
-@customElement('evg-icon')
+@safeCustomElement('evg-icon')
 export class Icon extends LitElement {
   variant?: 'default' | 'circle';
   label?: string;

src/components/content/Img/Img.ts

@@ -1,9 +1,9 @@
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 
 import { HtmlBoolean } from '../../../types/html-boolean.type';
 import { JSXCustomElement } from '../../../types/jsx-custom-element.type';
 import { Radius } from '../../../types/tokens.type';
+import { safeCustomElement } from '@/lib/safe-custom-element';
 
 export interface ImgAttributes {
   block?: HtmlBoolean;
@@ -14,7 +14,7 @@ export interface ImgAttributes {
   objectPosition?: string;
 }
 
-@customElement('evg-img')
+@safeCustomElement('evg-img')
 export class Img extends LitElement {
   static readonly properties = {
     ariaHidden: {

src/components/content/LoadingButton/LoadingButton.ts

@@ -1,15 +1,15 @@
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 
 import { pulse } from '@/lib/pulse';
+import { safeCustomElement } from '@/lib/safe-custom-element';
 import { HtmlBoolean } from '@/types/html-boolean.type';
 import { JSXCustomElement } from '@/types/jsx-custom-element.type';
 
 export interface LoadingButtonAttributes {
   ariaHidden?: HtmlBoolean;
 }
 
-@customElement('evg-loading-button')
+@safeCustomElement('evg-loading-button')
 export class LoadingButton extends LitElement {
   static readonly properties = {
     ariaHidden: {

src/components/content/LoadingImg/LoadingImg.ts

@@ -1,15 +1,15 @@
 import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 
 import { pulse } from '@/lib/pulse';
+import { safeCustomElement } from '@/lib/safe-custom-element';
 import { JSXCustomElement } from '@/types/jsx-custom-element.type';
 
 export interface LoadingImgAttributes {
   width?: string;
   height?: string;
 }
 
-@customElement('evg-loading-img')
+@safeCustomElement('evg-loading-img')
 export class LoadingImg extends LitElement {
   static readonly properties = {
     width: {

src/components/content/LoadingText/LoadingText.ts

@@ -1,15 +1,15 @@
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 
 import { pulse } from '@/lib/pulse';
+import { safeCustomElement } from '@/lib/safe-custom-element';
 import { HtmlBoolean } from '@/types/html-boolean.type';
 import { JSXCustomElement } from '@/types/jsx-custom-element.type';
 
 export interface LoadingTextAttributes {
   ariaHidden?: HtmlBoolean;
 }
 
-@customElement('evg-loading-text')
+@safeCustomElement('evg-loading-text')
 export class LoadingText extends LitElement {
   static readonly properties = {
     ariaHidden: {

src/components/control/RadioCheckbox/RadioCheckbox.ts

@@ -1,13 +1,13 @@
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 
 import { JSXCustomElement } from '../../../types/jsx-custom-element.type';
+import { safeCustomElement } from '@/lib/safe-custom-element';
 
 export interface RadioCheckboxAttributes {
   state?: 'valid' | 'invalid';
 }
 
-@customElement('evg-radio-checkbox')
+@safeCustomElement('evg-radio-checkbox')
 export class RadioCheckbox extends LitElement {
   static readonly properties = {
     state: { type: String, reflect: true },

src/lib/safe-custom-element.ts

@@ -0,0 +1,15 @@
+import { customElement } from 'lit/decorators.js';
+
+export function safeCustomElement(tagName: string) {
+  return (classOrTarget: CustomElementConstructor, context?: unknown): void => {
+    if (customElements.get(tagName)) {
+      console.warn(
+        `[Evergreen] "${tagName}" is already registered. ` +
+          `You may have multiple versions of @wrap.ngo/evergreen loaded, ` +
+          `which can cause unexpected behaviour.`,
+      );
+      return;
+    }
+    customElement(tagName)(classOrTarget as any, context as any);
+  };
+}