Since ckeditor 5 implementation has got rid of the iframe, styles in the editor typically inherit from the admin theme when users edit a node. This can be a cause of a delta between how an article looks when it is being edited and how it will appear on the front end by users.
As this seems like a common problem, after some research it appears that one workaround here could be encapsulate the ck editor markup in a web component and the shadow dom.
Note that the functionality still works (although we had to querySelector through the shadowRoot), but we’ve totally lost the global styling. The Shadow DOM boundary (shadow root) prevents styling coming in or going out (sorta like an iframe).
https://css-tricks.com/styling-a-web-component/
With this in mind I have created a rudimentary demo that shows how this might work. This demo encapsulates a bootstrap stylesheet within the web component, while ignoring the globally attached styles (such as those loaded from the admin theme).
https://codepen.io/twodareis2do/pen/oNmEKVe
also with actual ck editor
https://stackblitz.com/edit/lit-element-ckeditor5-oqcmf2?file=index.html
I have also conducted some basic research into whether ckeditor supports being run from a web component. Indeed there does seem to be some support. There is also a separate repo that is geared up specifically for this but have not tested this yet and it does not look like it has been updated recently.
https://github.com/FabienHenon/ckeditor5-webcomponent
This also has dependency on @ckeditor/ckeditor5-build-classic (same as drupal) .
Certainly there is support for running TinyMce as a web component and also there is also the Smart Editor where plugins are written as web components, so this certainly seems like it is feasible.
There is also thread here on CKeditor support but it does say that there are some issues in particular with :
There's currently no standardized API to access selection in a shadow root. If there were even different APIs, but somehow compatible, we could somehow resolve this ticket. But nope – it's 2023 and the state is as follows:
https://github.com/ckeditor/ckeditor5/issues/3891#issuecomment-1659181917
Active
11.0 🔥
Last updated
Tiny MCE example. Try adding bootstrap class such as btn btn-primary to an element using the source editor.
Moving to CKEditor5 component. The component 'ckeditor.module' refers to CKEditor 4, it was the simplest way to distinguish them when they were both in core.