diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts
index d5e59665310..ad444896356 100755
--- a/src/app/components/contextmenu/contextmenu.ts
+++ b/src/app/components/contextmenu/contextmenu.ts
@@ -47,7 +47,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers';
             [ngClass]="{ 'p-submenu-list': !root, 'p-contextmenu-root-list': root }"
             [@overlayAnimation]="visible"
             (@overlayAnimation.start)="onEnter($event, sublist)"
-            [id]="menuId + '_list'"
+            [attr.id]="menuId + '_list'"
             [tabindex]="tabindex"
             [attr.aria-label]="ariaLabel"
             [attr.aria-labelledBy]="ariaLabelledBy"
@@ -61,7 +61,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers';
             <ng-template ngFor let-processedItem [ngForOf]="items" let-index="index">
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
-                    [id]="getItemId(processedItem)"
+                    [attr.id]="getItemId(processedItem)"
                     [style]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
@@ -71,7 +71,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers';
                     #listItem
                     *ngIf="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                     role="menuitem"
-                    [id]="getItemId(processedItem)"
+                    [attr.id]="getItemId(processedItem)"
                     [attr.data-pc-section]="'menuitem'"
                     [attr.data-p-highlight]="isItemActive(processedItem)"
                     [attr.data-p-focused]="isItemFocused(processedItem)"
@@ -339,7 +339,7 @@ export class ContextMenuSub {
             #container
             [attr.data-pc-section]="'root'"
             [attr.data-pc-name]="'contextmenu'"
-            [id]="id"
+            [attr.id]="id"
             [ngClass]="{ 'p-contextmenu p-component': true, 'p-contextmenu-overlay': true }"
             [class]="styleClass"
             [ngStyle]="style"
diff --git a/src/app/components/dock/dock.ts b/src/app/components/dock/dock.ts
index 3816f45d475..6b402fe889e 100755
--- a/src/app/components/dock/dock.ts
+++ b/src/app/components/dock/dock.ts
@@ -18,7 +18,7 @@ import { DomHandler } from 'primeng/dom';
             <div class="p-dock-list-container">
                 <ul
                     #list
-                    [id]="id"
+                    [attr.id]="id"
                     class="p-dock-list"
                     role="menu"
                     [attr.aria-orientation]="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'"
diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts
index 75432f8db73..58eab5bafa1 100755
--- a/src/app/components/megamenu/megamenu.ts
+++ b/src/app/components/megamenu/megamenu.ts
@@ -40,7 +40,7 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
             #menubar
             [ngClass]="{ 'p-megamenu-root-list': root, 'p-submenu-list p-megamenu-submenu': !root }"
             [attr.role]="root ? 'menubar' : 'menu'"
-            [id]="id"
+            [attr.id]="id"
             [attr.aria-orientation]="orientation"
             [tabindex]="tabindex"
             [attr.aria-activedescendant]="focusedItemId"
@@ -53,7 +53,7 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
             <ng-template ngFor let-processedItem [ngForOf]="items" let-index="index">
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
-                    [id]="getItemId(processedItem)"
+                    [attr.id]="getItemId(processedItem)"
                     [style]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
@@ -63,7 +63,7 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
                     #listItem
                     *ngIf="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                     role="menuitem"
-                    [id]="getItemId(processedItem)"
+                    [attr.id]="getItemId(processedItem)"
                     [attr.data-pc-section]="'menuitem'"
                     [attr.data-p-highlight]="isItemActive(processedItem)"
                     [attr.data-p-focused]="isItemFocused(processedItem)"
@@ -350,7 +350,7 @@ export class MegaMenuSub {
             [ngStyle]="style"
             [attr.data-pc-section]="'root'"
             [attr.data-pc-name]="'megamenu'"
-            [id]="id"
+            [attr.id]="id"
         >
             <div class="p-megamenu-start" *ngIf="startTemplate">
                 <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
@@ -358,7 +358,7 @@ export class MegaMenuSub {
             <p-megaMenuSub
                 #rootmenu
                 [items]="processedItems"
-                [id]="id + '_list'"
+                [attr.id]="id + '_list'"
                 [menuId]="id"
                 [root]="true"
                 [orientation]="orientation"
diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts
index 67c76024162..989706e57e3 100755
--- a/src/app/components/menu/menu.ts
+++ b/src/app/components/menu/menu.ts
@@ -142,13 +142,13 @@ export class MenuItemContent {
             (@overlayAnimation.start)="onOverlayAnimationStart($event)"
             (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
             [attr.data-pc-name]="'menu'"
-            [id]="id"
+            [attr.id]="id"
         >
             <ul
                 #list
                 class="p-menu-list p-reset"
                 role="menu"
-                [id]="id + '_list'"
+                [attr.id]="id + '_list'"
                 [tabindex]="tabindex"
                 [attr.data-pc-section]="'menu'"
                 [attr.aria-activedescendant]="activedescendant()"
@@ -192,7 +192,6 @@ export class MenuItemContent {
                             [attr.data-p-disabled]="disabled(item.disabled)"
                             [attr.aria-disabled]="disabled(item.disabled)"
                             [attr.id]="menuitemId(item, id, i, j)"
-                            [id]="menuitemId(item, id, i, j)"
                         ></li>
                     </ng-template>
                 </ng-template>
@@ -215,7 +214,6 @@ export class MenuItemContent {
                         [attr.data-p-disabled]="disabled(item.disabled)"
                         [attr.aria-disabled]="disabled(item.disabled)"
                         [attr.id]="menuitemId(item, id, i)"
-                        [id]="menuitemId(item, id, i)"
                     ></li>
                 </ng-template>
             </ul>
diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts
index 058fde70ba4..9514d447381 100755
--- a/src/app/components/menubar/menubar.ts
+++ b/src/app/components/menubar/menubar.ts
@@ -64,13 +64,13 @@ export class MenubarService {
             [attr.aria-label]="ariaLabel"
             [attr.aria-labelledBy]="ariaLabelledBy"
             (keydown)="menuKeydown.emit($event)"
-            [id]="menuId"
+            [attr.id]="menuId"
             [attr.aria-activedescendant]="focusedItemId"
         >
             <ng-template ngFor let-processedItem [ngForOf]="items" let-index="index">
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
-                    [id]="getItemId(processedItem)"
+                    [attr.id]="getItemId(processedItem)"
                     [style]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
@@ -80,7 +80,7 @@ export class MenubarService {
                     #listItem
                     *ngIf="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                     role="menuitem"
-                    [id]="getItemId(processedItem)"
+                    [attr.id]="getItemId(processedItem)"
                     [attr.data-pc-section]="'menuitem'"
                     [attr.data-p-highlight]="isItemActive(processedItem)"
                     [attr.data-p-focused]="isItemFocused(processedItem)"
diff --git a/src/app/components/panelmenu/panelmenu.ts b/src/app/components/panelmenu/panelmenu.ts
index a33d98646e0..66c654eb048 100644
--- a/src/app/components/panelmenu/panelmenu.ts
+++ b/src/app/components/panelmenu/panelmenu.ts
@@ -53,7 +53,7 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
                     *ngIf="!processedItem.separator && isItemVisible(processedItem)"
                     [ngClass]="getItemClass(processedItem)"
                     role="treeitem"
-                    [id]="getItemId(processedItem)"
+                    [attr.id]="getItemId(processedItem)"
                     [attr.aria-label]="getItemProp(processedItem, 'label')"
                     [attr.aria-expanded]="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
                     [attr.aria-level]="level + 1"
@@ -698,7 +698,7 @@ export class PanelMenuList implements OnChanges {
                         [class]="getItemProp(item, 'styleClass')"
                         [ngStyle]="getItemProp(item, 'style')"
                         [pTooltip]="getItemProp(item, 'tooltip')"
-                        [id]="getHeaderId(item, i)"
+                        [attr.id]="getHeaderId(item, i)"
                         [tabindex]="0"
                         role="button"
                         [tooltipOptions]="getItemProp(item, 'tooltipOptions')"
@@ -772,7 +772,7 @@ export class PanelMenuList implements OnChanges {
                         [@rootItem]="getAnimation(item)"
                         (@rootItem.done)="onToggleDone()"
                         role="region"
-                        [id]="getContentId(item, i)"
+                        [attr.id]="getContentId(item, i)"
                         [attr.aria-labelledby]="getHeaderId(item, i)"
                         [attr.data-pc-section]="'toggleablecontent'"
                     >
diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts
index 71ac5822354..408134a5daf 100755
--- a/src/app/components/tieredmenu/tieredmenu.ts
+++ b/src/app/components/tieredmenu/tieredmenu.ts
@@ -55,7 +55,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
             <ng-template ngFor let-processedItem [ngForOf]="items" let-index="index">
                 <li
                     *ngIf="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
-                    [id]="getItemId(processedItem)"
+                    [attr.id]="getItemId(processedItem)"
                     [style]="getItemProp(processedItem, 'style')"
                     [ngClass]="getSeparatorItemClass(processedItem)"
                     role="separator"
@@ -65,7 +65,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
                     #listItem
                     *ngIf="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                     role="menuitem"
-                    [id]="getItemId(processedItem)"
+                    [attr.id]="getItemId(processedItem)"
                     [attr.data-pc-section]="'menuitem'"
                     [attr.data-p-highlight]="isItemActive(processedItem)"
                     [attr.data-p-focused]="isItemFocused(processedItem)"