diff --git a/js/src/components/Discussion/DiscussionComment.vue b/js/src/components/Discussion/DiscussionComment.vue
index c6db3188d..b0c825b69 100644
--- a/js/src/components/Discussion/DiscussionComment.vue
+++ b/js/src/components/Discussion/DiscussionComment.vue
@@ -171,33 +171,33 @@ article.comment {
       div.description-content {
         padding-bottom: 0.3rem;
 
-        /deep/ h1 {
+        ::v-deep h1 {
           font-size: 2rem;
         }
 
-        /deep/ h2 {
+        ::v-deep h2 {
           font-size: 1.5rem;
         }
 
-        /deep/ h3 {
+        ::v-deep h3 {
           font-size: 1.25rem;
         }
 
-        /deep/ ul {
+        ::v-deep ul {
           list-style-type: disc;
         }
 
-        /deep/ li {
+        ::v-deep li {
           margin: 10px auto 10px 2rem;
         }
 
-        /deep/ blockquote {
+        ::v-deep blockquote {
           border-left: 0.2em solid #333;
           display: block;
           padding-left: 1em;
         }
 
-        /deep/ p {
+        ::v-deep p {
           margin: 10px auto;
 
           a {
diff --git a/js/src/components/Event/DateTimePicker.vue b/js/src/components/Event/DateTimePicker.vue
index 94cab473b..3c21cea13 100644
--- a/js/src/components/Event/DateTimePicker.vue
+++ b/js/src/components/Event/DateTimePicker.vue
@@ -128,13 +128,13 @@ export default class DateTimePicker extends Vue {
 
 <style lang="scss" scoped>
 .timepicker {
-  /deep/ .dropdown-content {
+  ::v-deep .dropdown-content {
     padding: 0;
   }
 }
 
 .calendar-picker {
-  /deep/ .dropdown-menu {
+  ::v-deep .dropdown-menu {
     z-index: 200;
   }
 }
diff --git a/js/src/components/Event/EventListCard.vue b/js/src/components/Event/EventListCard.vue
index 5fda59918..81cb5d061 100644
--- a/js/src/components/Event/EventListCard.vue
+++ b/js/src/components/Event/EventListCard.vue
@@ -343,11 +343,11 @@ article.box {
       .button.is-text {
         text-decoration: none;
 
-        /deep/ span:first-child i.mdi::before {
+        ::v-deep span:first-child i.mdi::before {
           font-size: 24px !important;
         }
 
-        /deep/ span:last-child {
+        ::v-deep span:last-child {
           padding-left: 4px;
         }
 
diff --git a/js/src/components/Event/OrganizerPicker.vue b/js/src/components/Event/OrganizerPicker.vue
index be35489b3..7eb58814b 100644
--- a/js/src/components/Event/OrganizerPicker.vue
+++ b/js/src/components/Event/OrganizerPicker.vue
@@ -78,7 +78,7 @@ export default class OrganizerPicker extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-/deep/ .list-item {
+::v-deep .list-item {
   box-sizing: content-box;
 
   label.b-radio {
diff --git a/js/src/components/Event/ParticipationButton.vue b/js/src/components/Event/ParticipationButton.vue
index 3aaa826a4..f77a342af 100644
--- a/js/src/components/Event/ParticipationButton.vue
+++ b/js/src/components/Event/ParticipationButton.vue
@@ -218,7 +218,7 @@ export default class ParticipationButton extends Vue {
 }
 
 .anonymousParticipationModal {
-  /deep/ .animation-content {
+  ::v-deep .animation-content {
     z-index: 1;
   }
 }
diff --git a/js/src/components/Group/GroupSection.vue b/js/src/components/Group/GroupSection.vue
index 54e65468d..b798f4d9d 100644
--- a/js/src/components/Group/GroupSection.vue
+++ b/js/src/components/Group/GroupSection.vue
@@ -64,7 +64,7 @@ div.group-section-title {
     background: $purple-2;
   }
 
-  /deep/ & > a {
+  ::v-deep & > a {
     align-self: center;
     margin-right: 5px;
     color: $orange-3;
@@ -73,7 +73,7 @@ div.group-section-title {
   h2 {
     flex: 1;
 
-    /deep/ span {
+    ::v-deep span {
       display: inline;
       padding: 3px 8px;
       font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
@@ -82,7 +82,7 @@ div.group-section-title {
       flex: 1;
     }
 
-    /deep/ span.icon {
+    ::v-deep span.icon {
       flex: 0;
       height: 100%;
     }
diff --git a/js/src/components/Settings/SettingsMenu.vue b/js/src/components/Settings/SettingsMenu.vue
index c87d3df52..d64ec2d5c 100644
--- a/js/src/components/Settings/SettingsMenu.vue
+++ b/js/src/components/Settings/SettingsMenu.vue
@@ -88,7 +88,7 @@ export default class SettingsMenu extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-/deep/ a {
+::v-deep a {
   text-decoration: none;
 }
 </style>
diff --git a/js/src/views/About/Glossary.vue b/js/src/views/About/Glossary.vue
index 81a2a9936..33b74cb15 100644
--- a/js/src/views/About/Glossary.vue
+++ b/js/src/views/About/Glossary.vue
@@ -80,7 +80,7 @@ export default class Glossary extends Vue {
 </script>
 
 <style lang="scss" scoped>
-/deep/ dt {
+::v-deep dt {
   font-weight: bold;
 }
 </style>
diff --git a/js/src/views/About/Privacy.vue b/js/src/views/About/Privacy.vue
index 8f99c52af..4d9da6174 100644
--- a/js/src/views/About/Privacy.vue
+++ b/js/src/views/About/Privacy.vue
@@ -54,11 +54,11 @@ export default class Privacy extends Vue {
 main > .container {
   background: $white;
 
-  /deep/ dt {
+  ::v-deep dt {
     font-weight: bold;
   }
 }
-.content /deep/ li {
+.content ::v-deep li {
   margin-bottom: 1rem;
 }
 </style>
diff --git a/js/src/views/About/Rules.vue b/js/src/views/About/Rules.vue
index c154ba2c4..b2b5651e1 100644
--- a/js/src/views/About/Rules.vue
+++ b/js/src/views/About/Rules.vue
@@ -30,7 +30,7 @@ export default class Rules extends Vue {
 main > .container {
   background: $white;
 }
-.content /deep/ li {
+.content ::v-deep li {
   margin-bottom: 1rem;
 }
 </style>
diff --git a/js/src/views/About/Terms.vue b/js/src/views/About/Terms.vue
index 466189a62..5e55d78c1 100644
--- a/js/src/views/About/Terms.vue
+++ b/js/src/views/About/Terms.vue
@@ -51,7 +51,7 @@ export default class Terms extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-.content /deep/ li {
+.content ::v-deep li {
   margin-bottom: 1rem;
 }
 </style>
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index eb97c09eb..c2c7af277 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -280,7 +280,7 @@ main section > .container {
 }
 
 .save__navbar {
-  /deep/ .navbar-menu,
+  ::v-deep .navbar-menu,
   .navbar-end {
     flex-wrap: wrap;
   }
@@ -303,7 +303,7 @@ h2.subtitle {
 }
 
 .event__status__field {
-  /deep/ .field.has-addons {
+  ::v-deep .field.has-addons {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index a69beab30..2ef739fec 100644
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -1196,33 +1196,33 @@ div.sidebar {
   }
 
   .description-content {
-    /deep/ h1 {
+    ::v-deep h1 {
       font-size: 2rem;
     }
 
-    /deep/ h2 {
+    ::v-deep h2 {
       font-size: 1.5rem;
     }
 
-    /deep/ h3 {
+    ::v-deep h3 {
       font-size: 1.25rem;
     }
 
-    /deep/ ul {
+    ::v-deep ul {
       list-style-type: disc;
     }
 
-    /deep/ li {
+    ::v-deep li {
       margin: 10px auto 10px 2rem;
     }
 
-    /deep/ blockquote {
+    ::v-deep blockquote {
       border-left: 0.2em solid #333;
       display: block;
       padding-left: 1em;
     }
 
-    /deep/ p {
+    ::v-deep p {
       margin: 10px auto;
 
       a {
diff --git a/js/src/views/Group/Group.vue b/js/src/views/Group/Group.vue
index da476c5c2..8d89e2721 100644
--- a/js/src/views/Group/Group.vue
+++ b/js/src/views/Group/Group.vue
@@ -722,7 +722,7 @@ div.container {
               height: 5rem;
               width: 5rem;
 
-              /deep/ i.mdi.mdi-account-group.mdi-48px:before {
+              ::v-deep i.mdi.mdi-account-group.mdi-48px:before {
                 font-size: 100px;
               }
             }
diff --git a/js/src/views/Search.vue b/js/src/views/Search.vue
index b101bcc4e..b175ff0d2 100644
--- a/js/src/views/Search.vue
+++ b/js/src/views/Search.vue
@@ -391,7 +391,7 @@ h3.title {
 }
 
 form {
-  /deep/ .field label.label {
+  ::v-deep .field label.label {
     margin-bottom: 0;
   }
 }
diff --git a/js/src/views/Settings/AccountSettings.vue b/js/src/views/Settings/AccountSettings.vue
index 0d37c6522..d9e195013 100644
--- a/js/src/views/Settings/AccountSettings.vue
+++ b/js/src/views/Settings/AccountSettings.vue
@@ -328,7 +328,7 @@ export default class AccountSettings extends Vue {
   margin-top: 2rem;
 }
 
-/deep/ .modal .modal-background {
+::v-deep .modal .modal-background {
   background-color: initial;
 }
 </style>
diff --git a/js/src/views/User/Register.vue b/js/src/views/User/Register.vue
index f57f6dcf4..07be3dcb0 100644
--- a/js/src/views/User/Register.vue
+++ b/js/src/views/User/Register.vue
@@ -238,7 +238,7 @@ h2.title {
 }
 
 p.create-account {
-  /deep/ button {
+  ::v-deep button {
     margin: 1rem auto 2rem;
   }
 }