Early PoC of CKEditor5 inside a Shadow DOM.

[niegowski]

Suggested merge commit message (convention)

Type: Message. Closes TODO.

---

Additional information

For example – encountered issues, assumptions you had to make, other affected tickets, etc.

[charlttsie]

Error on opening shadow.html manual test

Steps

1. Open http://fake.ckeditor.com:8125/ckeditor5/tests/manual/shadow.html
2. Check the console

Result

The following error is present

Uncaught (in promise) Error: Orphaned iframed
    at rr (web-client-content-script.js:2:301067)
    at or (web-client-content-script.js:2:301152)
    at web-client-content-script.js:2:398792
    at c (web-client-content-script.js:2:204307)
    at web-client-content-script.js:2:206762
    at f (web-client-content-script.js:2:196974)
    at Generator.<anonymous> (web-client-content-script.js:2:198311)
    at Generator.next (web-client-content-script.js:2:197337)
    at u (web-client-content-script.js:2:203989)
    at a (web-client-content-script.js:2:204192)

[charlttsie]

As @niegowski pointed out, the issue described above is not related to the editor - it stems from the LastPass extension when the editor is placed inside a Shadow DOM.

[charlttsie]

What's the right way to set styles for the styles dropdown when the editor is inside the shadow root? I've tried to do it in the based on the example from the comment, so e.g.

#editor-component, .ck.ck-content p.info-box {
	--background-size: 30px;
	--background-color: #e91e63;
	padding: 1.2em 2em;
	border: 1px solid var(--background-color);
	background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) var(--background-size), transparent var(--background-size)), linear-gradient(135deg, transparent calc(100% - var(--background-size)), var(--background-color) calc(100% - var(--background-size)), var(--background-color));
	border-radius: 10px;
	margin: 1.5em 2em;
	box-shadow: 5px 5px 0 #ffe6ef;
}

yet it doesn't work the way it does for other styles and the style is applied to the whole #editor-component.

[charlttsie]

@niegowski We've finished testing the PR draft with @marcelmroz and @Acrophost. We checked it on different desktop and mobile browsers and haven't found any issues coming from the editor itself 🎉 However, the styles for the Styles dropdown were not set in the manual test and it wasn't clear to us how to add them, so please take a look at the question I posted above 🙂

[Witoso]

@charlttsie setting styles in Shadow DOMs is tricky, as one of their main aspects is not to allow styles leakage in and out. Check the programmatic method to do it: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#applying_styles_inside_the_shadow_dom