diff --git a/components/lib/badgedirective/BadgeDirective.js b/components/lib/badgedirective/BadgeDirective.js
index 0ce21d4c3..624eb652f 100644
--- a/components/lib/badgedirective/BadgeDirective.js
+++ b/components/lib/badgedirective/BadgeDirective.js
@@ -34,9 +34,8 @@ const BadgeDirective = BaseDirective.extend('badge', {
         !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
         el.setAttribute('data-p-overlay-badge', 'true');
         el.appendChild(badge);
-        el.$_pDirectiveElement = badge;
+        el.$pEl = badge;
 
-        BaseDirective.directiveElement = badge;
         BaseDirective.handleCSS('badge', el, binding);
     },
     updated(el, binding) {
diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js
index 129010a80..b1948020f 100644
--- a/components/lib/basedirective/BaseDirective.js
+++ b/components/lib/basedirective/BaseDirective.js
@@ -1,7 +1,6 @@
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export const BaseDirective = {
-    directiveElement: null,
     extend: (directiveName, hooks) => {
         return {
             created: (el, binding, vnode, prevVnode) => {
@@ -39,9 +38,9 @@ export const BaseDirective = {
         let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName];
 
         // global pt hook
-        _directive && _directive.hooks && _directive.hooks[hookName] && _directive.hooks[hookName](BaseDirective.directiveElement, el, binding, vnode, prevVnode);
+        _directive && _directive.hooks && _directive.hooks[hookName] && _directive.hooks[hookName](el.$pEl, el, binding, vnode, prevVnode);
         // options pt hook
-        binding.value && typeof binding.value === 'object' && binding.value.pt && binding.value.pt.hooks && binding.value.pt.hooks[hookName] && binding.value.pt.hooks[hookName](BaseDirective.directiveElement, el, binding, vnode, prevVnode);
+        binding.value && typeof binding.value === 'object' && binding.value.pt && binding.value.pt.hooks && binding.value.pt.hooks[hookName] && binding.value.pt.hooks[hookName](el.$pEl, el, binding, vnode, prevVnode);
     },
     handleCSS: (directiveName, el, binding) => {
         let _config = binding.instance.$primevue && binding.instance.$primevue.config;
diff --git a/components/lib/focustrap/FocusTrap.js b/components/lib/focustrap/FocusTrap.js
index 2eba62cd4..087587c3d 100644
--- a/components/lib/focustrap/FocusTrap.js
+++ b/components/lib/focustrap/FocusTrap.js
@@ -121,7 +121,7 @@ const FocusTrap = BaseDirective.extend('focustrap', {
         el.setAttribute('data-pc-section', 'root');
         el.setAttribute('data-pc-name', 'focustrap');
 
-        BaseDirective.directiveElement = el;
+        el.$pEl = el;
         BaseDirective.handleCSS('focustrap', el, binding);
     },
 
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
index 1a99a808f..78dab48b9 100644
--- a/components/lib/ripple/Ripple.js
+++ b/components/lib/ripple/Ripple.js
@@ -22,11 +22,10 @@ function create(el, binding) {
     ink.setAttribute('data-p-ink', 'true');
     ink.setAttribute('data-p-ink-active', 'false');
     el.appendChild(ink);
-    el.$_pDirectiveElement = ink;
+    el.$pEl = ink;
 
     ink.addEventListener('animationend', onAnimationEnd);
 
-    BaseDirective.directiveElement = ink;
     BaseDirective.handleCSS('ripple', ink, binding);
 }
 
diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js
index 4798ea390..69afcd5fd 100644
--- a/components/lib/styleclass/StyleClass.js
+++ b/components/lib/styleclass/StyleClass.js
@@ -4,7 +4,7 @@ import { DomHandler } from 'primevue/utils';
 function bind(el, binding) {
     const target = resolveTarget(el, binding);
 
-    BaseDirective.directiveElement = target;
+    el.$pEl = target;
 
     el.$_pstyleclass_clicklistener = () => {
         if (binding.value.toggleClass) {
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 46edecf48..3809186b7 100755
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -190,8 +190,7 @@ function create(el, options) {
         container.style.width = 'fit-content';
     }
 
-    el.$_pDirectiveElement = container;
-    BaseDirective.directiveElement = container;
+    el.$pEl = container;
     BaseDirective.handleCSS('tooltip', container, options);
 
     return container;