Hello Ryan, I'm developing a vaadin application using microfrontend as exp

Hello Ryan,

I’m developing a vaadin application using microfrontend as explained in this link [labs-micro-frontend]
(Micro Frontend in Java).

The question is When applying VaadinCKEditor with the WebComponentExporter, it seems that the component does not render correctly. Here is how I export the component from the microfrontend with a VaadinCKEditor:

public class MicrofrontendView extends VerticalLayout {

	private static final long serialVersionUID = 1L;

	public static class Exporter extends WebComponentExporter<MicrofrontendView> {

		private static final long serialVersionUID = 1L;
		

		public Exporter() {
			super("microfrontend-view");
			// tag name: microfrontend-view
			// javascript path: http://localhost:8092/helloworld-app/web-component/microfrontend-view.js
			
		}

        @Override
        protected void configureInstance( WebComponent<MicrofrontendView> webComponent, MicrofrontendView component )
        {
            //default config
        }

	}

	private VaadinCKEditor vaadinCKEditor = new VaadinCKEditorBuilder().createVaadinCKEditor();

	public MicrofrontendView() {
        this.setId("MicrofrontendView");
        
	    this.add( new Text("Remote microfrontend VaadinCKEditor:") );
	    this.add( vaadinCKEditor );
		
	}

}

I have created a simple example where you can see the problem. [microfrontend-ckeditor]
(GitHub - joseramongil/microfrontend-ckeditor: example microfrontend and VaadinCKEditor). This is the result with a native CKEditor and an embedded CKEDitor with microfrontend:

![mainview]
(https://raw.githubusercontent.com/joseramongil/microfrontend-ckeditor/main/No_render_remote_CKEditor.PNG)

Do you know why the VaadinCKEditor component is not rendering correctly and how to fix it?

Thanks.

Not sure about it. Looks like a css related problem.
What error did you get in your browser developer tools console?

From the browser console you do not see any error as such. You can see this in the example of the error that I have uploaded in this link.[microfrontend-ckeditor]
(https://github.com/joseramongil/microfrontend-ckeditor)

As I see it, the problem is that the CKEditorVaadin component does not use a local scope, its actual scope is global ([style-scopes]
(https://vaadin.com/docs/v14/flow/styling/style-scopes)). This is the reason why the component normally works as expected, but if the component is put inside a shadow DOM of another component (like my case of using CKEditorVaadin with microfrontend) the component does not work because it is not loading, inside the shadow-root where the component is located, the css and javascripts necessary for its operation.

To avoid these problems in future versions I would recommend moving from global to local scope. This would be achieved by putting the entire contents of the component in the shadow DOM of tag “vaadin-ckeditor” and load into the shadow-root of tag “vaadin-ckeditor” all your css and scripts.

Well, I will take it into consideration in future release. Cheers.