diff --git a/packages/primevue/src/carousel/Carousel.vue b/packages/primevue/src/carousel/Carousel.vue
index aab537281..089cba713 100755
--- a/packages/primevue/src/carousel/Carousel.vue
+++ b/packages/primevue/src/carousel/Carousel.vue
@@ -103,7 +103,6 @@
 <script>
 import { addClass, find, findSingle, getAttribute, removeClass, setAttribute } from '@primeuix/utils/dom';
 import { localeComparator, sort } from '@primeuix/utils/object';
-import { UniqueComponentId } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronLeftIcon from '@primevue/icons/chevronleft';
 import ChevronRightIcon from '@primevue/icons/chevronright';
@@ -161,7 +160,6 @@ export default {
     mounted() {
         let stateChanged = false;
 
-        this.$el.setAttribute(this.attributeSelector, '');
         this.createStyle();
         this.calculatePosition();
 
@@ -569,7 +567,7 @@ export default {
             }
 
             let innerHTML = `
-                .p-carousel[${this.attributeSelector}] .p-carousel-item {
+                .p-carousel[${this.$attrSelector}] .p-carousel-item {
                     flex: 1 0 ${100 / this.d_numVisible}%
                 }
             `;
@@ -590,7 +588,7 @@ export default {
 
                     innerHTML += `
                         @media screen and (max-width: ${res.breakpoint}) {
-                            .p-carousel[${this.attributeSelector}] .p-carousel-item {
+                            .p-carousel[${this.$attrSelector}] .p-carousel-item {
                                 flex: 1 0 ${100 / res.numVisible}%
                             }
                         }
@@ -641,9 +639,6 @@ export default {
         ariaNextButtonLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.nextPageLabel : undefined;
         },
-        attributeSelector() {
-            return UniqueComponentId();
-        },
         empty() {
             return !this.value || this.value.length === 0;
         },
diff --git a/packages/primevue/src/datepicker/DatePicker.vue b/packages/primevue/src/datepicker/DatePicker.vue
index 07d843579..90fc85680 100755
--- a/packages/primevue/src/datepicker/DatePicker.vue
+++ b/packages/primevue/src/datepicker/DatePicker.vue
@@ -642,8 +642,6 @@ export default {
         this.bindMatchMediaListener();
 
         if (this.inline) {
-            this.overlay && this.overlay.setAttribute(this.attributeSelector, '');
-
             if (!this.disabled) {
                 this.preventFocus = true;
                 this.initFocusableCell();
@@ -875,7 +873,6 @@ export default {
             return validMin && validMax && validDate && validDay;
         },
         onOverlayEnter(el) {
-            el.setAttribute(this.attributeSelector, '');
             const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
 
             addStyle(el, styles);
@@ -2712,14 +2709,14 @@ export default {
                     for (let i = 0; i < responsiveOptions.length; i++) {
                         let { breakpoint, numMonths } = responsiveOptions[i];
                         let styles = `
-                            .p-datepicker-panel[${this.attributeSelector}] .p-datepicker-calendar:nth-child(${numMonths}) .p-datepicker-next-button {
+                            .p-datepicker-panel[${this.$attrSelector}] .p-datepicker-calendar:nth-child(${numMonths}) .p-datepicker-next-button {
                                 display: inline-flex;
                             }
                         `;
 
                         for (let j = numMonths; j < this.numberOfMonths; j++) {
                             styles += `
-                                .p-datepicker-panel[${this.attributeSelector}] .p-datepicker-calendar:nth-child(${j + 1}) {
+                                .p-datepicker-panel[${this.$attrSelector}] .p-datepicker-calendar:nth-child(${j + 1}) {
                                     display: none;
                                 }
                             `;
@@ -2943,9 +2940,6 @@ export default {
         monthNames() {
             return this.$primevue.config.locale.monthNames;
         },
-        attributeSelector() {
-            return UniqueComponentId();
-        },
         switchViewButtonDisabled() {
             return this.numberOfMonths > 1 || this.disabled;
         },
diff --git a/packages/primevue/src/orderlist/OrderList.vue b/packages/primevue/src/orderlist/OrderList.vue
index 719d3e897..155fa7d7b 100755
--- a/packages/primevue/src/orderlist/OrderList.vue
+++ b/packages/primevue/src/orderlist/OrderList.vue
@@ -259,7 +259,6 @@ export default {
         },
         createStyle() {
             if (!this.styleElement && !this.isUnstyled) {
-                this.$el.setAttribute(this.attributeSelector, '');
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
                 setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
@@ -267,11 +266,11 @@ export default {
 
                 let innerHTML = `
 @media screen and (max-width: ${this.breakpoint}) {
-    .p-orderlist[${this.attributeSelector}] {
+    .p-orderlist[${this.$attrSelector}] {
         flex-direction: column;
     }
 
-    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls {
+    .p-orderlist[${this.$attrSelector}] .p-orderlist-controls {
         flex-direction: row;
     }
 }
@@ -291,9 +290,6 @@ export default {
         }
     },
     computed: {
-        attributeSelector() {
-            return UniqueComponentId();
-        },
         moveUpAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined;
         },
diff --git a/packages/primevue/src/paginator/Paginator.vue b/packages/primevue/src/paginator/Paginator.vue
index fbcf7b0ad..78e1324d6 100755
--- a/packages/primevue/src/paginator/Paginator.vue
+++ b/packages/primevue/src/paginator/Paginator.vue
@@ -90,7 +90,6 @@
 
 <script>
 import { setAttribute } from '@primeuix/utils/dom';
-import { UniqueComponentId } from '@primevue/core/utils';
 import BasePaginator from './BasePaginator.vue';
 import CurrrentPageReport from './CurrentPageReport.vue';
 import FirstPageLink from './FirstPageLink.vue';
@@ -127,7 +126,6 @@ export default {
         }
     },
     mounted() {
-        this.setPaginatorAttribute();
         this.createStyle();
     },
     methods: {
@@ -209,21 +207,21 @@ export default {
                     if (key === 'default') {
                         innerHTML += `
                             @media screen ${minValue} {
-                                .paginator[${this.attributeSelector}],
+                                .p-paginator[${this.$attrSelector}],
                                     display: flex;
                                 }
                             }
                         `;
                     } else {
                         innerHTML += `
-.paginator[${this.attributeSelector}], .p-paginator-${key} {
+.p-paginator-${key} {
     display: none;
 }
 @media screen ${minValue} and (max-width: ${key}) {
-    .paginator[${this.attributeSelector}], .p-paginator-${key} {
+    .p-paginator-${key} {
         display: flex;
     }
-    .paginator[${this.attributeSelector}],
+
     .p-paginator-default{
         display: none;
     }
@@ -238,13 +236,6 @@ export default {
         hasBreakpoints() {
             return typeof this.template === 'object';
         },
-        setPaginatorAttribute() {
-            if (this.$refs.paginator && this.$refs.paginator.length >= 0) {
-                [...this.$refs.paginator].forEach((el) => {
-                    el.setAttribute(this.attributeSelector, '');
-                });
-            }
-        },
         getAriaLabel(labelType) {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria[labelType] : undefined;
         }
@@ -326,9 +317,6 @@ export default {
         },
         currentPage() {
             return this.pageCount > 0 ? this.page + 1 : 0;
-        },
-        attributeSelector() {
-            return UniqueComponentId();
         }
     },
     components: {
diff --git a/packages/primevue/src/picklist/PickList.vue b/packages/primevue/src/picklist/PickList.vue
index 379dd6534..0b02097e4 100755
--- a/packages/primevue/src/picklist/PickList.vue
+++ b/packages/primevue/src/picklist/PickList.vue
@@ -562,7 +562,6 @@ export default {
         },
         createStyle() {
             if (!this.styleElement && !this.isUnstyled) {
-                this.$el.setAttribute(this.attributeSelector, '');
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
                 setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
@@ -570,11 +569,11 @@ export default {
 
                 let innerHTML = `
 @media screen and (max-width: ${this.breakpoint}) {
-    .p-picklist[${this.attributeSelector}] {
+    .p-picklist[${this.$attrSelector}] {
         flex-direction: column;
     }
 
-    .p-picklist[${this.attributeSelector}] .p-picklist-controls {
+    .p-picklist[${this.$attrSelector}] .p-picklist-controls {
         flex-direction: row;
     }
 }
@@ -609,9 +608,6 @@ export default {
         targetList() {
             return this.modelValue && this.modelValue[1] ? this.modelValue[1] : null;
         },
-        attributeSelector() {
-            return UniqueComponentId();
-        },
         moveUpAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined;
         },
diff --git a/packages/primevue/src/popover/Popover.vue b/packages/primevue/src/popover/Popover.vue
index 18963a0bc..f6dcc344f 100755
--- a/packages/primevue/src/popover/Popover.vue
+++ b/packages/primevue/src/popover/Popover.vue
@@ -14,10 +14,10 @@
 </template>
 
 <script>
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
-import { addStyle, absolutePosition, getOffset, addClass, focus, isClient, isTouchDevice, setAttribute } from '@primeuix/utils/dom';
-import { ZIndex } from '@primeuix/utils/zindex';
 import { $dt } from '@primeuix/styled';
+import { absolutePosition, addClass, addStyle, focus, getOffset, isClient, isTouchDevice, setAttribute } from '@primeuix/utils/dom';
+import { ZIndex } from '@primeuix/utils/zindex';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import FocusTrap from 'primevue/focustrap';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -103,7 +103,6 @@ export default {
             this.selfClick = true;
         },
         onEnter(el) {
-            this.container.setAttribute(this.attributeSelector, '');
             addStyle(el, { position: 'absolute', top: '0', left: '0' });
             this.alignOverlay();
 
@@ -277,7 +276,7 @@ export default {
                 for (let breakpoint in this.breakpoints) {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
-                            .p-popover[${this.attributeSelector}] {
+                            .p-popover[${this.$attrSelector}] {
                                 width: ${this.breakpoints[breakpoint]} !important;
                             }
                         }
@@ -300,11 +299,6 @@ export default {
             });
         }
     },
-    computed: {
-        attributeSelector() {
-            return UniqueComponentId();
-        }
-    },
     directives: {
         focustrap: FocusTrap,
         ripple: Ripple
diff --git a/packages/primevue/src/toast/Toast.vue b/packages/primevue/src/toast/Toast.vue
index adad44c7c..4a7e8f01d 100755
--- a/packages/primevue/src/toast/Toast.vue
+++ b/packages/primevue/src/toast/Toast.vue
@@ -26,7 +26,6 @@
 import { setAttribute } from '@primeuix/utils/dom';
 import { isEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
-import { UniqueComponentId } from '@primevue/core/utils';
 import Portal from 'primevue/portal';
 import ToastEventBus from 'primevue/toasteventbus';
 import BaseToast from './BaseToast.vue';
@@ -100,8 +99,6 @@ export default {
             this.messages = [];
         },
         onEnter() {
-            this.$refs.container.setAttribute(this.attributeSelector, '');
-
             if (this.autoZIndex) {
                 ZIndex.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
             }
@@ -131,7 +128,7 @@ export default {
 
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
-                            .p-toast[${this.attributeSelector}] {
+                            .p-toast[${this.$attrSelector}] {
                                 ${breakpointStyle}
                             }
                         }
@@ -148,11 +145,7 @@ export default {
             }
         }
     },
-    computed: {
-        attributeSelector() {
-            return UniqueComponentId();
-        }
-    },
+
     components: {
         ToastMessage: ToastMessage,
         Portal: Portal
diff --git a/packages/primevue/src/treetable/TreeTable.vue b/packages/primevue/src/treetable/TreeTable.vue
index 8a70e2ef0..594d5d7c6 100755
--- a/packages/primevue/src/treetable/TreeTable.vue
+++ b/packages/primevue/src/treetable/TreeTable.vue
@@ -168,10 +168,10 @@
 </template>
 
 <script>
+import { addStyle, clearSelection, find, getAttribute, getIndex, getOffset, getOuterWidth, setAttribute } from '@primeuix/utils/dom';
+import { localeComparator, resolveFieldData, sort } from '@primeuix/utils/object';
 import { FilterService } from '@primevue/core/api';
-import { HelperSet, getVNodeProp, UniqueComponentId } from '@primevue/core/utils';
-import { getOffset, addStyle, getIndex, find, getOuterWidth, getAttribute, setAttribute, clearSelection } from '@primeuix/utils/dom';
-import { resolveFieldData, localeComparator, sort } from '@primeuix/utils/object';
+import { getVNodeProp, HelperSet } from '@primevue/core/utils';
 import SpinnerIcon from '@primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
 import BaseTreeTable from './BaseTreeTable.vue';
@@ -241,9 +241,6 @@ export default {
             this.d_multiSortMeta = newValue;
         }
     },
-    mounted() {
-        this.$el.setAttribute(this.attributeSelector, '');
-    },
     beforeUnmount() {
         this.destroyStyleElement();
         this.d_columns.clear();
@@ -684,7 +681,7 @@ export default {
             this.createStyleElement();
 
             let innerHTML = '';
-            let selector = `[data-pc-name="treetable"][${this.attributeSelector}] > [data-pc-section="tablecontainer"] > table[data-pc-section="table"]`;
+            let selector = `[data-pc-name="treetable"][${this.$attrSelector}] > [data-pc-section="tablecontainer"] > table[data-pc-section="table"]`;
 
             widths.forEach((width, index) => {
                 let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
@@ -863,9 +860,6 @@ export default {
 
                 return data ? data.length : 0;
             }
-        },
-        attributeSelector() {
-            return UniqueComponentId();
         }
     },
     components: {