Off-canvas styles override CKEditor's reset and theme

Problem/Motivation

CKEditor's default styles and resets are being overridden by off-canvas' CSS. As a result, CKEditor is basically un-usable when rendered inside of the off-canvas dialog.

Currently the selector "#drupal-off-canvas" is a part of almost every selector in off-canvas' CSS, and that makes overriding any off-canvas style really tough. This is because in #2826722: Add a 'fence' around settings tray with aggressive CSS reset. which originally created the CSS reset for the off-canvas dialog this was the only way we could figure out make sure the reset was actually effective against contrib themes that we tested against. See the Specificity Calculator as to why really only an ID can be sure to override selectors using styles in contrib themes.

We also tried #2853222: Explore using an IFrame to sandbox CSS for the Off Canvas tray and other ways #2853208: [META] Determine best method ensure consistent theming of Off Canvas Tray. There is also the general issue #2195695: Admin UIs on the front-end are difficult to theme which I don't think has come up with any good solutions.

Because of backwards compatibility concerns and that none of the other solutions are supported by the browsers we need to support or didn't cause their own problems we probably are stuck with the current method for the reset.

As soon as you start to create/edit entities in the off-canvas dialog you are going to run into this problem like in #2957425: Allow the inline creation of non-reusable Custom Blocks in the layout builder.

How it looks now:

You can see this locally by following these steps:

1. Apply the provided "layout-builder-debug.patch" patch
2. Install the Standard profile
3. Enable the "Layout Builder Debug" (layout_builder_debug) module
4. Visit /admin/structure/types/manage/article/display-layout/default
5. Click "Add Block"
6. Select "Debug Form Styling" from the block listing
7. See that CKEditor looks funky

Proposed resolution

1. Add :not(.js-off-canvas-ignore), to the end of all selectors used in the off-canvas css library.
2. Document that modules that want a particular element and it's child elements be excluded by the off-canvas css reset should add the class .off-canvas-ignore-parent to the parent element.
3. Via Javascript look for elements with the .off-canvas-ignore-parent class and add the .js-off-canvas-ignore class to it and all it's children.

Step #1 here makes the proposed patch very large but because it is :not selector it not should effect any sites current CSS unless they are already using the .js-off-canvas-ignore class. This seem very very unlikely.

Remaining tasks

Discuss the problem, determine what solution we should use.

User interface changes

n/a

API changes

n/a

Data model changes

n/a