diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index 8ba54e748..3062af756 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -432,7 +432,7 @@ export default {
 }
 
 @media screen and (max-width: 960px) {
-	::v-deep .p-toolbar {
+	:deep(.p-toolbar) {
 		flex-wrap: wrap;
 
 		.p-button {
@@ -597,7 +597,7 @@ export default {
 }
 
 @media screen and (max-width: 960px) {
-	::v-deep .p-toolbar {
+	:deep(.p-toolbar) {
 		flex-wrap: wrap;
 
 		.p-button {
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 95786bcaa..2f5ddf34a 100755
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -189,13 +189,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .p-paginator {
+:deep(.p-paginator) {
     .p-paginator-current {
         margin-left: auto;
     }
 }
 
-::v-deep .p-progressbar {
+:deep(.p-progressbar) {
     height: .5rem;
     background-color: #D8DADC;
 
@@ -204,7 +204,7 @@ export default {
     }
 }
 
-::v-deep .p-datepicker {
+:deep(.p-datepicker) {
     min-width: 25rem;
 
     td {
@@ -212,7 +212,7 @@ export default {
     }
 }
 
-::v-deep .p-datatable.p-datatable-customers {
+:deep(.p-datatable.p-datatable-customers) {
     .p-datatable-header {
         padding: 1rem;
         text-align: left;
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 4d5d02454..05fcfa68d 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -2816,13 +2816,13 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .p-paginator {
+:deep(.p-paginator) {
     .p-paginator-current {
         margin-left: auto;
     }
 }
 
-::v-deep .p-progressbar {
+:deep(.p-progressbar) {
     height: .5rem;
     background-color: #D8DADC;
 
@@ -2831,7 +2831,7 @@ export default {
     }
 }
 
-::v-deep .p-datepicker {
+:deep(.p-datepicker) {
     min-width: 25rem;
 
     td {
@@ -2839,7 +2839,7 @@ export default {
     }
 }
 
-::v-deep .p-datatable.p-datatable-customers {
+:deep(.p-datatable.p-datatable-customers) {
     .p-datatable-header {
         padding: 1rem;
         text-align: left;
diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index f13b7c0ef..4075f03f6 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -336,7 +336,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .editable-cells-table td.p-cell-editing {
+:deep(.editable-cells-table td.p-cell-editing) {
     padding-top: 0;
     padding-bottom: 0;
 }
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index bde359622..9bed5918c 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -567,13 +567,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .p-paginator {
+:deep(.p-paginator) {
     .p-paginator-current {
         margin-left: auto;
     }
 }
 
-::v-deep .p-progressbar {
+:deep(.p-progressbar) {
     height: .5rem;
     background-color: #D8DADC;
 
@@ -582,7 +582,7 @@ export default {
     }
 }
 
-::v-deep .p-datepicker {
+:deep(.p-datepicker) {
     min-width: 25rem;
 
     td {
@@ -590,7 +590,7 @@ export default {
     }
 }
 
-::v-deep .p-datatable.p-datatable-customers {
+:deep(.p-datatable.p-datatable-customers) {
     .p-datatable-header {
         padding: 1rem;
         text-align: left;
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index 218e6dc28..526d997c4 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -256,7 +256,7 @@ export default {
     font-weight: 700;
 }
 
-::v-deep .p-rowgroup-header {
+:deep(.p-rowgroup-header) {
     span {
         font-weight: 700;
     }
@@ -319,7 +319,7 @@ export default {
     font-weight: 700;
 }
 
-::v-deep .p-rowgroup-header {
+:deep(.p-rowgroup-header) {
     span {
         font-weight: 700;
     }
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index ed9d0cc26..5a2b27b51 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -338,11 +338,11 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .p-datatable-frozen-tbody {
+:deep(.p-datatable-frozen-tbody) {
     font-weight: bold;
 }
 
-::v-deep .p-datatable-scrollable .p-frozen-column {
+:deep(.p-datatable-scrollable .p-frozen-column) {
     font-weight: bold;
 }
 </CodeHighlight>
@@ -444,11 +444,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .p-datatable-frozen-tbody {
+:deep(.p-datatable-frozen-tbody) {
     font-weight: bold;
 }
 
-::v-deep .p-datatable-scrollable .p-frozen-column {
+:deep(.p-datatable-scrollable .p-frozen-column) {
     font-weight: bold;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableStyleDemo.vue b/src/views/datatable/DataTableStyleDemo.vue
index e04fa1d07..256db4cd9 100755
--- a/src/views/datatable/DataTableStyleDemo.vue
+++ b/src/views/datatable/DataTableStyleDemo.vue
@@ -94,7 +94,7 @@ export default {
     color: #66BB6A;
 }
 
-::v-deep .row-accessories {
+:deep(.row-accessories) {
     background-color: rgba(0,0,0,.15) !important;
 
 }
@@ -155,7 +155,7 @@ export default {
     color: #66BB6A;
 }
 
-::v-deep .row-accessories {
+:deep(.row-accessories) {
     background-color: rgba(0,0,0,.15) !important;
 
 }
diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index 65522331d..8da5e3b00 100755
--- a/src/views/dataview/DataViewDemo.vue
+++ b/src/views/dataview/DataViewDemo.vue
@@ -144,7 +144,7 @@ export default {
 	vertical-align: middle;
 }
 
-::v-deep .product-list-item {
+:deep(.product-list-item) {
 	display: flex;
 	align-items: center;
 	padding: 1rem;
@@ -181,7 +181,7 @@ export default {
 	}
 }
 
-::v-deep .product-grid-item {
+:deep(.product-grid-item) {
 	margin: .5rem;
 	border: 1px solid #dee2e6;
 
diff --git a/src/views/dock/DockDemo.vue b/src/views/dock/DockDemo.vue
index 8d08cc80a..f5b170e3d 100644
--- a/src/views/dock/DockDemo.vue
+++ b/src/views/dock/DockDemo.vue
@@ -340,7 +340,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .dock-demo {
+:deep(.dock-demo) {
     .dock-window {
         width: 100%;
         height: 450px;
diff --git a/src/views/dock/DockDoc.vue b/src/views/dock/DockDoc.vue
index 9f768b137..33e95cea9 100644
--- a/src/views/dock/DockDoc.vue
+++ b/src/views/dock/DockDoc.vue
@@ -469,7 +469,7 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .dock-demo {
+:deep(.dock-demo) {
     .dock-window {
         width: 100%;
         height: 450px;
diff --git a/src/views/fullcalendar/FullCalendarDemo.vue b/src/views/fullcalendar/FullCalendarDemo.vue
index f8d82f811..21623b5da 100755
--- a/src/views/fullcalendar/FullCalendarDemo.vue
+++ b/src/views/fullcalendar/FullCalendarDemo.vue
@@ -58,7 +58,7 @@ export default {
 
 <style scoped>
     @media screen and (max-width: 960px) {
-        ::v-deep .fc-header-toolbar {
+        :deep(.fc-header-toolbar) {
             display: flex;
             flex-wrap: wrap;
         }
diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue
index bf2498876..e24d49eaa 100644
--- a/src/views/galleria/GalleriaAdvancedDemo.vue
+++ b/src/views/galleria/GalleriaAdvancedDemo.vue
@@ -100,64 +100,62 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep {
-    .custom-galleria {
-        &.fullscreen {
-            display: flex;
-            flex-direction: column;
-
-            .p-galleria-content {
-                flex-grow: 1;
-                justify-content: center;
-            }
-        }
+:deep(.custom-galleria) {
+    &.fullscreen {
+        display: flex;
+        flex-direction: column;
 
         .p-galleria-content {
-            position: relative;
+            flex-grow: 1;
+            justify-content: center;
         }
+    }
 
-        .p-galleria-thumbnail-wrapper {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-        }
+    .p-galleria-content {
+        position: relative;
+    }
 
-        .p-galleria-thumbnail-items-container {
-            width: 100%;
-        }
+    .p-galleria-thumbnail-wrapper {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
 
-        .custom-galleria-footer {
-            display: flex;
-            align-items: center;
-            background-color: rgba(0, 0, 0, .9);
+    .p-galleria-thumbnail-items-container {
+        width: 100%;
+    }
+
+    .custom-galleria-footer {
+        display: flex;
+        align-items: center;
+        background-color: rgba(0, 0, 0, .9);
+        color: #ffffff;
+
+        > button {
+            background-color: transparent;
             color: #ffffff;
+            border: 0 none;
+            border-radius: 0;
+            margin: .2rem 0;
 
-            > button {
-                background-color: transparent;
-                color: #ffffff;
-                border: 0 none;
-                border-radius: 0;
-                margin: .2rem 0;
+            &.fullscreen-button {
+                margin-left: auto;
+            }
 
-                &.fullscreen-button {
-                    margin-left: auto;
-                }
-
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.1);
-                }
+            &:hover {
+                background-color: rgba(255, 255, 255, 0.1);
             }
         }
+    }
 
-        .title-container {
-            > span {
-                font-size: .9rem;
-                padding-left: .829rem;
+    .title-container {
+        > span {
+            font-size: .9rem;
+            padding-left: .829rem;
 
-                &.title {
-                    font-weight: bold;
-                }
+            &.title {
+                font-weight: bold;
             }
         }
     }
@@ -259,64 +257,62 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep {
-    .custom-galleria {
-        &.fullscreen {
-            display: flex;
-            flex-direction: column;
-
-            .p-galleria-content {
-                flex-grow: 1;
-                justify-content: center;
-            }
-        }
+:deep(.custom-galleria) {
+    &.fullscreen {
+        display: flex;
+        flex-direction: column;
 
         .p-galleria-content {
-            position: relative;
+            flex-grow: 1;
+            justify-content: center;
         }
+    }
 
-        .p-galleria-thumbnail-wrapper {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-        }
+    .p-galleria-content {
+        position: relative;
+    }
 
-        .p-galleria-thumbnail-items-container {
-            width: 100%;
-        }
+    .p-galleria-thumbnail-wrapper {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
 
-        .custom-galleria-footer {
-            display: flex;
-            align-items: center;
-            background-color: rgba(0, 0, 0, .9);
+    .p-galleria-thumbnail-items-container {
+        width: 100%;
+    }
+
+    .custom-galleria-footer {
+        display: flex;
+        align-items: center;
+        background-color: rgba(0, 0, 0, .9);
+        color: #ffffff;
+
+        > button {
+            background-color: transparent;
             color: #ffffff;
+            border: 0 none;
+            border-radius: 0;
+            margin: .2rem 0;
 
-            > button {
-                background-color: transparent;
-                color: #ffffff;
-                border: 0 none;
-                border-radius: 0;
-                margin: .2rem 0;
+            &.fullscreen-button {
+                margin-left: auto;
+            }
 
-                &.fullscreen-button {
-                    margin-left: auto;
-                }
-
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.1);
-                }
+            &:hover {
+                background-color: rgba(255, 255, 255, 0.1);
             }
         }
+    }
 
-        .title-container {
-            > span {
-                font-size: .9rem;
-                padding-left: .829rem;
+    .title-container {
+        > span {
+            font-size: .9rem;
+            padding-left: .829rem;
 
-                &.title {
-                    font-weight: bold;
-                }
+            &.title {
+                font-weight: bold;
             }
         }
     }
diff --git a/src/views/galleria/GalleriaIndicatorDemo.vue b/src/views/galleria/GalleriaIndicatorDemo.vue
index 4bacc5a95..618f14a85 100755
--- a/src/views/galleria/GalleriaIndicatorDemo.vue
+++ b/src/views/galleria/GalleriaIndicatorDemo.vue
@@ -190,17 +190,15 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep {
-    .custom-indicator-galleria {
-        .indicator-text {
-            color: #e9ecef;
-            cursor: pointer;
-        }
+:deep(.custom-indicator-galleria) {
+    .indicator-text {
+        color: #e9ecef;
+        cursor: pointer;
+    }
 
-        .p-highlight {
-            .indicator-text {
-                color: var(--primary-color);
-            }
+    .p-highlight {
+        .indicator-text {
+            color: var(--primary-color);
         }
     }
 }
@@ -249,17 +247,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep {
-    .custom-indicator-galleria {
-        .indicator-text {
-            color: #e9ecef;
-            cursor: pointer;
-        }
+:deep(.custom-indicator-galleria) {
+    .indicator-text {
+        color: #e9ecef;
+        cursor: pointer;
+    }
 
-        .p-highlight {
-            .indicator-text {
-                color: var(--primary-color);
-            }
+    .p-highlight {
+        .indicator-text {
+            color: var(--primary-color);
         }
     }
 }
diff --git a/src/views/multiselect/MultiSelectDemo.vue b/src/views/multiselect/MultiSelectDemo.vue
index 862135c31..a4a10b665 100755
--- a/src/views/multiselect/MultiSelectDemo.vue
+++ b/src/views/multiselect/MultiSelectDemo.vue
@@ -82,7 +82,7 @@ export default {
     width: 18rem;
 }
 
-::v-deep .multiselect-custom {
+:deep(.multiselect-custom) {
     .p-multiselect-label:not(.p-placeholder) {
         padding-top: .25rem;
         padding-bottom: .25rem;
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 226a639ac..b70221458 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -430,7 +430,7 @@ export default {
     min-width: 15rem;
 }
 
-::v-deep .multiselect-custom {
+:deep(.multiselect-custom) {
     .p-multiselect-label:not(.p-placeholder) {
         padding-top: .25rem;
         padding-bottom: .25rem;
diff --git a/src/views/organizationchart/OrganizationChartDemo.vue b/src/views/organizationchart/OrganizationChartDemo.vue
index 3f40e87c5..dccd4cbc4 100755
--- a/src/views/organizationchart/OrganizationChartDemo.vue
+++ b/src/views/organizationchart/OrganizationChartDemo.vue
@@ -182,7 +182,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .p-organizationchart {
+:deep(.p-organizationchart) {
     .p-person {
         padding: 0;
         border: 0 none;
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index de6e38d9c..c25845fc0 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -648,7 +648,7 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .p-organizationchart {
+:deep(.p-organizationchart) {
     .p-person {
         padding: 0;
         border: 0 none;
diff --git a/src/views/password/PasswordDemo.vue b/src/views/password/PasswordDemo.vue
index 292d27563..fc8ba3fa7 100755
--- a/src/views/password/PasswordDemo.vue
+++ b/src/views/password/PasswordDemo.vue
@@ -61,7 +61,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .p-password input {
+:deep(.p-password input) {
     width: 15rem
 }
 </style>
\ No newline at end of file
diff --git a/src/views/ripple/RippleDemo.vue b/src/views/ripple/RippleDemo.vue
index e8558b9ff..e97287576 100644
--- a/src/views/ripple/RippleDemo.vue
+++ b/src/views/ripple/RippleDemo.vue
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .card-container {
+:deep(.card-container) {
     .card {
         width: 75px;
         height: 75px;
diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index 5986a2b5f..c443e1af8 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/src/views/ripple/RippleDoc.vue
@@ -101,7 +101,7 @@ export default {}
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .card-container {
+:deep(.card-container) {
     .card {
         width: 75px;
         height: 75px;
diff --git a/src/views/scrollpanel/ScrollPanelDemo.vue b/src/views/scrollpanel/ScrollPanelDemo.vue
index a298afce9..44f1bb0d4 100644
--- a/src/views/scrollpanel/ScrollPanelDemo.vue
+++ b/src/views/scrollpanel/ScrollPanelDemo.vue
@@ -79,7 +79,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .p-scrollpanel {
+:deep(.p-scrollpanel) {
     p {
         padding: .5rem;
         line-height: 1.5;
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
index ca51e3236..6c6053b7a 100644
--- a/src/views/scrollpanel/ScrollPanelDoc.vue
+++ b/src/views/scrollpanel/ScrollPanelDoc.vue
@@ -155,7 +155,7 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .p-scrollpanel {
+:deep(.p-scrollpanel) {
     p {
         padding: .5rem;
         line-height: 1.5;
diff --git a/src/views/scrolltop/ScrollTopDemo.vue b/src/views/scrolltop/ScrollTopDemo.vue
index 7001c85bb..36a7eee7f 100644
--- a/src/views/scrolltop/ScrollTopDemo.vue
+++ b/src/views/scrolltop/ScrollTopDemo.vue
@@ -47,7 +47,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .custom-scrolltop {
+:deep(.custom-scrolltop) {
     width: 2rem;
     height: 2rem;
     border-radius: 4px;
diff --git a/src/views/scrolltop/ScrollTopDoc.vue b/src/views/scrolltop/ScrollTopDoc.vue
index 2666b6437..bed9fe30e 100644
--- a/src/views/scrolltop/ScrollTopDoc.vue
+++ b/src/views/scrolltop/ScrollTopDoc.vue
@@ -129,7 +129,7 @@ import ScrollTop from 'primevue/scrolltop';
 </CodeHighlight>
 
 <CodeHighlight>
-::v-deep .custom-scrolltop {
+:deep(.custom-scrolltop) {
     width: 2rem;
     height: 2rem;
     background-color: var(--primary-color);
diff --git a/src/views/speeddial/SpeedDialDemo.vue b/src/views/speeddial/SpeedDialDemo.vue
index daae5daaf..fbe602c37 100644
--- a/src/views/speeddial/SpeedDialDemo.vue
+++ b/src/views/speeddial/SpeedDialDemo.vue
@@ -112,7 +112,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .speeddial-linear-demo {
+:deep() {
     .p-speeddial-direction-up {
         left: calc(50% - 2rem);
         bottom: 0;
@@ -130,7 +130,7 @@ export default {
         top: calc(50% - 2rem);
     }
 }
-::v-deep .speeddial-circle-demo {
+:deep(.speeddial-circle-demo) {
     .p-speeddial-circle {
         top: calc(50% - 2rem);
         left: calc(50% - 2rem);
@@ -172,7 +172,7 @@ export default {
         }
     }
 }
-::v-deep .speeddial-tooltip-demo {
+:deep(.speeddial-tooltip-demo) {
     .p-speeddial-direction-up {
         &.speeddial-left {
             left: 0;
@@ -184,13 +184,13 @@ export default {
         }
     }
 }
-::v-deep .speeddial-delay-demo {
+:deep(.speeddial-delay-demo) {
     .p-speeddial-direction-up {
         left: calc(50% - 2rem);
         bottom: 0;
     }
 }
-::v-deep .speeddial-mask-demo {
+:deep(.speeddial-mask-demo) {
     .p-speeddial-direction-up {
         right: 0;
         bottom: 0;
diff --git a/src/views/speeddial/SpeedDialDoc.vue b/src/views/speeddial/SpeedDialDoc.vue
index fe7ddea53..73331f896 100644
--- a/src/views/speeddial/SpeedDialDoc.vue
+++ b/src/views/speeddial/SpeedDialDoc.vue
@@ -384,7 +384,7 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-::v-deep .speeddial-linear-demo {
+:deep(.speeddial-linear-demo) {
     .p-speeddial-direction-up {
         left: calc(50% - 2rem);
         bottom: 0;
@@ -402,7 +402,7 @@ export default {
         top: calc(50% - 2rem);
     }
 }
-::v-deep .speeddial-circle-demo {
+:deep(.speeddial-circle-demo) {
     .p-speeddial-circle {
         top: calc(50% - 2rem);
         left: calc(50% - 2rem);
@@ -444,7 +444,7 @@ export default {
         }
     }
 }
-::v-deep .speeddial-tooltip-demo {
+:deep(.speeddial-tooltip-demo) {
     .p-speeddial-direction-up {
         &.speeddial-left {
             left: 0;
@@ -456,13 +456,13 @@ export default {
         }
     }
 }
-::v-deep .speeddial-delay-demo {
+:deep(.speeddial-delay-demo) {
     .p-speeddial-direction-up {
         left: calc(50% - 2rem);
         bottom: 0;
     }
 }
-::v-deep .speeddial-mask-demo {
+:deep(.speeddial-mask-demo) {
     .p-speeddial-direction-up {
         right: 0;
         bottom: 0;
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
index 67e1f5e0f..a8ef1b9b7 100755
--- a/src/views/steps/StepsDemo.vue
+++ b/src/views/steps/StepsDemo.vue
@@ -68,11 +68,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep b {
+:deep(b) {
     display: block
 }
 
-::v-deep .p-card-body {
+:deep(.p-card-body) {
     padding: 2rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/tabmenu/TabMenuDemo.vue b/src/views/tabmenu/TabMenuDemo.vue
index 9ce98dbcd..139569ab0 100755
--- a/src/views/tabmenu/TabMenuDemo.vue
+++ b/src/views/tabmenu/TabMenuDemo.vue
@@ -60,7 +60,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .tabmenudemo-content  {
+:deep(.tabmenudemo-content) {
     padding: 2rem 1rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/terminal/TerminalDemo.vue b/src/views/terminal/TerminalDemo.vue
index 18a8f2b9e..7084b42b6 100755
--- a/src/views/terminal/TerminalDemo.vue
+++ b/src/views/terminal/TerminalDemo.vue
@@ -66,7 +66,7 @@ p {
     margin-top: 0;
 }
 
-::v-deep .dark-demo-terminal {
+:deep(.dark-demo-terminal) {
     background-color: #212121;
     color: #ffffff;
 
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index 1feab6074..ce0aa4fb4 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@@ -176,7 +176,7 @@ p {
     margin-top: 0;
 }
 
-::v-deep .dark-demo-terminall {
+:deep(.dark-demo-terminal) {
     background-color: #212121;
     color: #ffffff;
 
diff --git a/src/views/theming/Theming.vue b/src/views/theming/Theming.vue
index 7bbc81aaa..d1ffb72ba 100755
--- a/src/views/theming/Theming.vue
+++ b/src/views/theming/Theming.vue
@@ -58,7 +58,7 @@ html {
 
 <CodeHighlight>
 &lt;style lang="scss" scoped&gt;
-::v-deep .dark-panel.p-panel {
+:deep(.dark-panel.p-panel) {
     .p-panel-titlebar {
         background: #212121;
     }
diff --git a/src/views/timeline/TimelineDemo.vue b/src/views/timeline/TimelineDemo.vue
index 0ea007016..3bdcf8a66 100644
--- a/src/views/timeline/TimelineDemo.vue
+++ b/src/views/timeline/TimelineDemo.vue
@@ -141,13 +141,13 @@ export default {
     z-index: 1;
 }
 
-::v-deep .p-timeline-event-content,
-::v-deep .p-timeline-event-opposite {
+:deep(.p-timeline-event-content),
+:deep(.p-timeline-event-opposite) {
     line-height: 1;
 }
 
 @media screen and (max-width: 960px) {
-    ::v-deep .customized-timeline {
+    :deep(.customized-timeline) {
             .p-timeline-event:nth-child(even) {
                 flex-direction: row !important;
 
diff --git a/src/views/tree/TreeTemplatingDemo.vue b/src/views/tree/TreeTemplatingDemo.vue
index e680c237d..491faf59c 100755
--- a/src/views/tree/TreeTemplatingDemo.vue
+++ b/src/views/tree/TreeTemplatingDemo.vue
@@ -108,7 +108,7 @@ button {
     margin-right: .5rem;
 }
 
-::v-deep .p-tree {
+:deep(.p-tree) {
     a {
         color: #2196f3;
     }
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 7678fb67e..f1667cae7 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -1229,25 +1229,6 @@ export default {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
     }
 }
-</CodeHighlight>
-
-<CodeHighlight lang="css">
-.sm-visible {
-    display: none;
-}
-
-@media screen and (max-width: 40em) {
-    ::v-deep {
-        .sm-invisible {
-            display: none;
-        }
-
-        .sm-visible {
-            display: inline;
-            margin-right: .5rem;
-        }
-    }
-}
 </CodeHighlight>
 
 				<h5>Properties</h5>
diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue
index 22f62d868..d4755acfd 100755
--- a/src/views/treetable/TreeTableResponsiveDemo.vue
+++ b/src/views/treetable/TreeTableResponsiveDemo.vue
@@ -91,15 +91,13 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    ::v-deep {
-        .sm-invisible {
-            display: none;
-        }
+    .sm-invisible {
+        display: none;
+    }
 
-        .sm-visible {
-            display: inline;
-            margin-right: .5rem;
-        }
+    .sm-visible {
+        display: inline;
+        margin-right: .5rem;
     }
 }
 </CodeHighlight>
@@ -135,15 +133,13 @@ export default {
 }
 
 @media screen and (max-width: 40em) {
-    ::v-deep {
-        .sm-invisible {
-            display: none;
-        }
+    .sm-invisible {
+        display: none;
+    }
 
-        .sm-visible {
-            display: inline;
-            margin-right: .5rem;
-        }
+    .sm-visible {
+        display: inline;
+        margin-right: .5rem;
     }
 }
 </style>
\ No newline at end of file