diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css
index a1fbe01..22f727e 100644
--- a/core/modules/outside_in/css/outside_in.module.css
+++ b/core/modules/outside_in/css/outside_in.module.css
@@ -4,7 +4,7 @@
  */
 
 /* Position the offcanvas tray container outside the right of the viewport. */
-#offcanvas {
+.ui-dialog-offcanvas {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
@@ -17,7 +17,7 @@
 }
 
 /* Position the button that closes the offcanvas tray. */
-#offcanvas > button.offcanvasClose {
+.ui-dialog-offcanvas button.ui-dialog-titlebar-close .ui-button-icon-primary{
   position: static;
   float: right; /* LTR */
   height: 52px;
@@ -29,36 +29,36 @@
   cursor: pointer;
   z-index: 501;
 }
-#offcanvas > button.offcanvasClose:focus {
+.ui-dialog-offcanvas button.ui-dialog-titlebar-close:focus .ui-button-icon-primary {
   outline: none;
 }
-[dir="rtl"] #offcanvas > button.offcanvasClose {
+[dir="rtl"] .ui-dialog-offcanvas button.ui-dialog-titlebar-close .ui-button-icon-primary {
   float: left;
 }
 
 /* Create a place to name the tray. */
-#offcanvas h1 {
+.ui-dialog-offcanvas h1 {
   padding: 15px 25% 15px 15px; /* LTR */
   margin-top: 0;
   margin-bottom: 0;
   font-size: 120%;
 }
-[dir="rtl"] #offcanvas h1 {
+[dir="rtl"] .ui-dialog-offcanvas h1 {
   text-align: right;
   padding-right: 0;
   padding-left: 25%;
 }
 
 /* Wrap the form that's inside the offcanvas tray. */
-#offcanvas > .offcanvas-content {
+.ui-dialog-offcanvas > .ui-dialog-content {
   height: 10000px;
   padding: 0 15px;
 }
-[dir="rtl"] #offcanvas .offcanvas-content {
+[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
   text-align: right;
 }
-#offcanvas > .form-item,
-#offcanvas > .form-item .form-item {
+.ui-dialog-offcanvas > .form-item,
+.ui-dialog-offcanvas > .form-item .form-item {
   width: 100%;
 }
 
@@ -74,7 +74,7 @@
 /* Media queries. */
 /* @todo Rework breakpoints: https://www.drupal.org/node/2784599. */
 @media (max-width: 700px) {
-  #offcanvas {
+  .ui-dialog-offcanvas {
     position: absolute;
     display: block;
     right: 0;
@@ -88,7 +88,7 @@
     display: inline-block;
     width: 100%;
   }
-  #main-canvas-wrapper.js-tray-open #offcanvas {
+  #main-canvas-wrapper.js-tray-open .ui-dialog-offcanvas {
     margin-right: 0;
     right: 0;
     top: 0;
@@ -100,7 +100,7 @@
 }
 @media (min-width: 700px) {
   /* Position the offcanvas tray container outside the right of the viewport. */
-  #offcanvas {
+  .ui-dialog-offcanvas {
     position: fixed;
     display: inline-block;
     width: 35%;
@@ -110,7 +110,7 @@
     -ms-transform: translateX(100%);
     transform: translateX(100%);
   }
-  [dir="rtl"] #offcanvas {
+  [dir="rtl"] .ui-dialog-offcanvas {
     text-align: right;
     -webkit-transform: translateX(-100%);
     -moz-transform: translateX(-100%);
@@ -124,7 +124,7 @@
     width: 100%;
   }
   /* Move the offcanvas tray on canvas. */
-  #main-canvas-wrapper.js-tray-open #offcanvas {
+  #main-canvas-wrapper.js-tray-open .ui-dialog-offcanvas {
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
     -o-transform: translateX(0);
@@ -138,7 +138,7 @@
 }
 @media (min-width: 900px) {
   /* Position the offcanvas tray container outside the right of the viewport. */
-  #offcanvas {
+  .ui-dialog-offcanvas {
     position: fixed;
     display: inline-block;
     width: 30%;
@@ -155,7 +155,7 @@
 }
 @media (min-width: 1000px) {
   /* Position the offcanvas tray container outside the right of the viewport. */
-  #offcanvas {
+  .ui-dialog-offcanvas {
     position: fixed;
     display: inline-block;
     width: 25%;
@@ -176,27 +176,27 @@
  * @todo Remove when more general form styling is done:
  *    https://www.drupal.org/node/2784437.
  */
-#offcanvas td {
+.ui-dialog-offcanvas td {
     width: auto;
 }
-#offcanvas .menu-enabled {
+.ui-dialog-offcanvas .menu-enabled {
     width: auto;
 }
-#offcanvas table#menu-overview th {
+.ui-dialog-offcanvas table#menu-overview th {
   display: none;
 }
-#offcanvas table#menu-overview tr td:first-child {
+.ui-dialog-offcanvas table#menu-overview tr td:first-child {
   min-width: 110px;
 }
-#offcanvas details > .details-wrapper {
+.ui-dialog-offcanvas details > .details-wrapper {
   padding: 5px;
   overflow: scroll;
 }
-#offcanvas .tabledrag-toggle-weight {
+.ui-dialog-offcanvas .tabledrag-toggle-weight {
   font-size: 80%;
 }
-#offcanvas input:focus,
-#offcanvas summary:focus {
+.ui-dialog-offcanvas input:focus,
+.ui-dialog-offcanvas summary:focus {
   outline: none;
   box-shadow: 2px 2px #ddd;
 }
diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css
index 1a17850..8c311b9 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/outside_in/css/outside_in.theme.css
@@ -92,18 +92,18 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:be
  * @todo Move Off-canvas css into core Off-canvas library:
  *   https://www.drupal.org/node/2784443.
  */
-#offcanvas {
+.ui-dialog-offcanvas {
   background: #fff;
   border-left: 1px solid #ddd; /* LTR */
   box-shadow: -2px 2px 1px 1px rgba(0, 0, 0, 0.1); /* LTR */
 }
-[dir="rtl"] #offcanvas {
+[dir="rtl"] .ui-dialog-offcanvas {
   border-right: 1px solid #ddd;
   box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 /* Style the tray header. */
-#offcanvas h1 {
+.ui-dialog-offcanvas h1 {
   font-size: 120%;
   border-bottom: 1px solid #ddd;
 }
diff --git a/core/modules/outside_in/js/offcanvas.js b/core/modules/outside_in/js/offcanvas.js
index 63bc6cf..7530783 100644
--- a/core/modules/outside_in/js/offcanvas.js
+++ b/core/modules/outside_in/js/offcanvas.js
@@ -89,6 +89,7 @@
           at: 'right top',
           of: window
         };
+        settings.dialogClass = 'ui-dialog-offcanvas';
       }
     },
     'dialog:beforeclose': function (event, dialog, $element) {