diff --git a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts
index 4f91f9da6..c4bf388db 100644
--- a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts
+++ b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts
@@ -1,5 +1,5 @@
 import { html, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import type { CheckboxOption, CheckboxOptions } from "../../types";
 import eleStyle from "./f-checkbox-group.scss?inline";
 import globalStyle from "./f-checkbox-group-global.scss?inline";
@@ -12,9 +12,10 @@ import { FDiv } from "@ollion/flow-core/src/components/f-div/f-div";
 import { FText } from "@ollion/flow-core/src/components/f-text/f-text";
 import { FCheckbox } from "@ollion/flow-core/src/components/f-checkbox/f-checkbox";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { flowElement } from "@ollion/flow-core/src/utils";
 
 injectCss("f-checkbox-group", globalStyle);
-@customElement("f-checkbox-group")
+@flowElement("f-checkbox-group")
 export class FCheckboxGroup extends FRoot {
 	/**
 	 * css loaded from scss file
diff --git a/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts b/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts
index 0eaa4ecdb..9b271cdda 100644
--- a/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts
+++ b/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts
@@ -1,5 +1,5 @@
 import { html, nothing, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import eleStyle from "./f-field-separator.scss?inline";
 import globalStyle from "./f-field-separator-global.scss?inline";
 import { injectCss } from "@ollion/flow-core-config";
@@ -8,11 +8,13 @@ import { FDiv } from "@ollion/flow-core/src/components/f-div/f-div";
 import { FText } from "@ollion/flow-core/src/components/f-text/f-text";
 import { FDivider } from "@ollion/flow-core/src/components/f-divider/f-divider";
 import type { FDividerState } from "@ollion/flow-core/src/components/f-divider/f-divider";
+import { flowElement } from "@ollion/flow-core/src/utils";
+
 injectCss("f-field-separator", globalStyle);
 
 export type FFieldSeparatorState = FDividerState;
 
-@customElement("f-field-separator")
+@flowElement("f-field-separator")
 export class FFieldSeparator extends FRoot {
 	/**
 	 * css loaded from scss file
diff --git a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts
index d82267763..104a17e41 100644
--- a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts
+++ b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { html, nothing, PropertyValueMap, unsafeCSS } from "lit";
-import { customElement, property, queryAll } from "lit/decorators.js";
+import { property, queryAll } from "lit/decorators.js";
 import { injectCss } from "@ollion/flow-core-config";
 import eleStyle from "./f-form-array.scss?inline";
 import type {
@@ -23,6 +23,7 @@ import globalStyle from "./f-form-array-global.scss?inline";
 import { FRoot } from "@ollion/flow-core/src/mixins/components/f-root/f-root";
 import { FDiv } from "@ollion/flow-core/src/components/f-div/f-div";
 import { FIconButton } from "@ollion/flow-core/src/components/f-icon-button/f-icon-button";
+import { flowElement } from "@ollion/flow-core/src/utils";
 
 injectCss("f-form-array", globalStyle);
 export type ArrayValueType = (
@@ -35,7 +36,7 @@ export type ArrayValueType = (
 	| unknown[]
 	| undefined
 )[];
-@customElement("f-form-array")
+@flowElement("f-form-array")
 export class FFormArray extends FRoot {
 	/**
 	 * css loaded from scss file
diff --git a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts
index 6dfe8e04c..c45f7659e 100644
--- a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts
+++ b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts
@@ -1,5 +1,5 @@
 import { html, nothing, PropertyValueMap, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import type {
 	FormBuilderField,
 	FFormInputElements,
@@ -30,10 +30,11 @@ import { cloneDeep, isEqual } from "lodash-es";
 import { injectCss } from "@ollion/flow-core-config";
 import { ifDefined } from "lit/directives/if-defined.js";
 import formArrayGlobalStyles from "./../f-form-array/f-form-array-global.scss?inline";
+import { flowElement } from "@ollion/flow-core/src/utils";
 
 injectCss("f-form-builder", globalStyle);
 
-@customElement("f-form-builder")
+@flowElement("f-form-builder")
 export class FFormBuilder extends FRoot {
 	/**
 	 * css loaded from scss file
diff --git a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts
index a5b34d747..0f2641df1 100644
--- a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts
+++ b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts
@@ -1,5 +1,5 @@
 import { html, nothing, PropertyValueMap, TemplateResult, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 import { FRoot } from "@ollion/flow-core/src/mixins/components/f-root/f-root";
 import { FDiv } from "@ollion/flow-core/src/components/f-div/f-div";
 import eleStyle from "./f-form-object.scss?inline";
@@ -23,13 +23,14 @@ import { FFieldSeparator } from "../f-field-separator/f-field-separator";
 import { radioGroupStyles } from "../f-radio-group/f-radio-group";
 import { checkboxGroupStyles } from "../f-checkbox-group/f-checkbox-group";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { flowElement } from "@ollion/flow-core/src/utils";
 
 export type ObjectValueType = Record<
 	string,
 	// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 	string | string[] | number | number[] | unknown | unknown[] | undefined
 >;
-@customElement("f-form-object")
+@flowElement("f-form-object")
 export class FFormObject extends FRoot {
 	/**
 	 * css loaded from scss file
diff --git a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts
index a7dc9558a..0cf11cb2b 100644
--- a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts
+++ b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts
@@ -1,5 +1,5 @@
 import { html, PropertyValueMap, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import { RadioOption, RadioOptions } from "../../types";
 import eleStyle from "./f-radio-group.scss?inline";
 import globalStyle from "./f-radio-group-global.scss?inline";
@@ -10,6 +10,7 @@ import { FDiv } from "@ollion/flow-core/src/components/f-div/f-div";
 import { FText } from "@ollion/flow-core/src/components/f-text/f-text";
 import { FRadio } from "@ollion/flow-core/src/components/f-radio/f-radio";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { flowElement } from "@ollion/flow-core/src/utils";
 
 injectCss("f-checkbox-group", globalStyle);
 
@@ -17,7 +18,7 @@ export const radioGroupStyles = eleStyle;
 /**
  * @summary Text component includes Headings, titles, body texts and links.
  */
-@customElement("f-radio-group")
+@flowElement("f-radio-group")
 export class FRadioGroup extends FRoot {
 	/**
 	 * css loaded from scss file
diff --git a/packages/flow-lineage/src/components/f-lineage/f-lineage.ts b/packages/flow-lineage/src/components/f-lineage/f-lineage.ts
index ce8a3943d..8f30d3683 100644
--- a/packages/flow-lineage/src/components/f-lineage/f-lineage.ts
+++ b/packages/flow-lineage/src/components/f-lineage/f-lineage.ts
@@ -1,5 +1,5 @@
 import { html, PropertyValues, render, unsafeCSS } from "lit";
-import { customElement, property, query, queryAssignedElements } from "lit/decorators.js";
+import { property, query, queryAssignedElements } from "lit/decorators.js";
 import eleStyle from "./f-lineage.scss?inline";
 import globalStyle from "./f-lineage-global.scss?inline";
 import * as d3 from "d3";
@@ -29,11 +29,12 @@ import { FText } from "@ollion/flow-core/src/components/f-text/f-text";
 import { FIcon } from "@ollion/flow-core/src/components/f-icon/f-icon";
 import { FIconButton } from "@ollion/flow-core/src/components/f-icon-button/f-icon-button";
 import type { FPopover } from "@ollion/flow-core/src/components/f-popover/f-popover";
+import { flowElement } from "@ollion/flow-core/src/utils";
 
 injectCss("f-lineage", globalStyle);
 // Renders attribute names of parent element to textContent
 
-@customElement("f-lineage")
+@flowElement("f-lineage")
 export class FLineage extends FRoot {
 	/**
 	 * css loaded from scss file