feat: add custom-element decorator

core/pfe-core/controllers/test/combobox-controller.spec.ts

@@ -2,7 +2,7 @@ import { expect, fixture, nextFrame } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
 
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { query } from 'lit/decorators/query.js';
 import { ReactiveElement, html, render, type PropertyValues, type TemplateResult } from 'lit';
 

core/pfe-core/decorators/custom-element.ts

@@ -0,0 +1,61 @@
+import type { Constructor } from '@lit/reactive-element/decorators/base.js';
+import type { CustomElementDecorator } from '@lit/reactive-element/decorators/custom-element.js';
+
+/**
+ * Allow for custom element classes with private constructors
+ */
+type CustomElementClass = Omit<typeof HTMLElement, 'new'>;
+
+/**
+ * Helper to define a custom element with gracefull error
+ * handling for duplicate definition.
+ */
+function defineElement(tagName: string, classOrTarget: CustomElementConstructor) {
+  try {
+    customElements.define(
+      tagName,
+      classOrTarget
+    );
+  } catch (e) {
+    if (e instanceof Error) {
+      if (e.message.includes('has already been used with this registry')) {
+        console.warn(`Duplicate definition for [${tagName}].`, e);
+        return;
+      }
+    }
+    throw e;
+  }
+}
+
+/**
+ * Class decorator factory that defines the decorated class as a custom element.
+ * Allows duplicate custom element definitions to fail gracefully with a console
+ * warn rather than an unhandled error for duplicate definitions.
+ *
+ *
+ * ```js
+ * @customElement('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The tag name of the custom element to define.
+ */
+export const customElement =
+  (tagName: string): CustomElementDecorator =>
+    (
+      classOrTarget: CustomElementClass | Constructor<HTMLElement>,
+      context?: ClassDecoratorContext<Constructor<HTMLElement>>
+    ) => {
+      if (context !== undefined) {
+        context.addInitializer(() => {
+          defineElement(tagName, classOrTarget as CustomElementConstructor);
+        });
+      } else {
+        defineElement(tagName, classOrTarget as CustomElementConstructor);
+      }
+    };
+

core/pfe-core/package.json

@@ -42,6 +42,7 @@
     "./decorators/initializer.js": "./decorators/initializer.js",
     "./decorators/observed.js": "./decorators/observed.js",
     "./decorators/observes.js": "./decorators/observes.js",
+    "./decorators/custom-element.js": "./decorators/custom-element.js",
     "./decorators/time.js": "./decorators/time.js",
     "./decorators/trace.js": "./decorators/trace.js",
     "./functions/arraysAreEquivalent.js": "./functions/arraysAreEquivalent.js",

docs/docs/develop/javascript.md

@@ -64,7 +64,7 @@ In TypeScript, lit observed properties are defined using either the `@property()
 or the `@state()` decorator (for private or internal properties). Add the property import statement.
 
 ```ts
-import { customElement } from 'lit/decorators/custom-element.js'
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js'
 import { property } from 'lit/decorators/property.js'
 ```
 
@@ -190,7 +190,7 @@ For your reference, here's the final Javascript code for `pf-cool-element`:
 
 ```ts
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { styleMap } from 'lit/directives/style-map.js';
 

docs/docs/develop/structure.md

@@ -48,7 +48,7 @@ Let's take a look at the `pf-cool-element.ts` file to see what we have.
 
 ```ts
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 
 import styles from './pf-cool-element.css';
 

elements/pf-accordion/pf-accordion-header.ts

@@ -1,7 +1,7 @@
 import type { PfAccordion } from './pf-accordion.js';
 
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';

elements/pf-accordion/pf-accordion-panel.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';

elements/pf-accordion/pf-accordion.ts

@@ -2,7 +2,7 @@ import { LitElement, html, type TemplateResult } from 'lit';
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import { listen } from '@patternfly/pfe-core/decorators/listen.js';
 import { property } from 'lit/decorators/property.js';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 
 import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
 import { NumberListConverter } from '@patternfly/pfe-core';

elements/pf-avatar/pf-avatar.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators/property.js';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 
 import style from './pf-avatar.css';
 

elements/pf-back-to-top/pf-back-to-top.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, isServer, type PropertyValues, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 

elements/pf-background-image/pf-background-image.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 import { property } from 'lit/decorators/property.js';
 

elements/pf-badge/pf-badge.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import styles from './pf-badge.css';

elements/pf-banner/pf-banner.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';
 
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 

elements/pf-button/pf-button.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';

elements/pf-card/pf-card.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 

elements/pf-chip/pf-chip-group.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
 import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';

elements/pf-chip/pf-chip.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import '@patternfly/elements/pf-button/pf-button.js';

elements/pf-clipboard-copy/pf-clipboard-copy.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';

elements/pf-code-block/pf-code-block.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './pf-code-block.css';

elements/pf-dropdown/pf-dropdown-group.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import styles from './pf-dropdown-group.css';

elements/pf-dropdown/pf-dropdown-item.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { query } from 'lit/decorators/query.js';

elements/pf-dropdown/pf-dropdown-menu.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { consume } from '@lit/context';
 import { state } from 'lit/decorators/state.js';
 import { context, type PfDropdownContext } from './context.js';

elements/pf-dropdown/pf-dropdown.ts

@@ -1,7 +1,7 @@
 import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 import { provide } from '@lit/context';

elements/pf-icon/pf-icon.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { state } from 'lit/decorators/state.js';
 

elements/pf-jump-links/pf-jump-links-item.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import { ifDefined } from 'lit/directives/if-defined.js';

elements/pf-jump-links/pf-jump-links-list.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 
 import style from './pf-jump-links-list.css';
 

elements/pf-jump-links/pf-jump-links.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';

elements/pf-label/pf-label.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 

elements/pf-modal/pf-modal.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
 import { ifDefined } from 'lit/directives/if-defined.js';

elements/pf-panel/pf-panel.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';

elements/pf-popover/pf-popover.ts

@@ -1,7 +1,7 @@
 import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 
 import { LitElement, nothing, html, type PropertyValues, isServer, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
 import { styleMap } from 'lit/directives/style-map.js';

elements/pf-progress-stepper/pf-progress-step.ts

@@ -2,7 +2,7 @@ import type { PropertyValues, TemplateResult } from 'lit';
 import type { PfProgressStepper } from './pf-progress-stepper.js';
 
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';

elements/pf-progress-stepper/pf-progress-stepper.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import style from './pf-progress-stepper.css';

elements/pf-progress/pf-progress.ts

@@ -1,7 +1,7 @@
 import type { PropertyValues, TemplateResult } from 'lit';
 import { LitElement, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';

elements/pf-select/pf-option-group.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, type TemplateResult } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';

elements/pf-select/pf-option.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';

elements/pf-select/pf-select.ts

@@ -3,7 +3,7 @@ import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-co
 import type { TemplateResult } from 'lit';
 
 import { LitElement, html, isServer } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
 import { repeat } from 'lit/directives/repeat.js';

elements/pf-spinner/pf-spinner.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { property } from 'lit/decorators/property.js';
 

elements/pf-switch/pf-switch.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';

elements/pf-table/pf-caption.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 
 import styles from './pf-caption.css';
 

elements/pf-table/pf-table.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { state } from 'lit/decorators/state.js';
 

elements/pf-table/pf-tbody.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 
 import styles from './pf-tbody.css';
 

elements/pf-table/pf-td.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import styles from './pf-td.css';

elements/pf-table/pf-th.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, svg, type TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '@patternfly/pfe-core/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';