Skip to content

Add CSS styles to classic editor when in a Web Component#7847

Closed
ywsang wants to merge 4 commits intockeditor:masterfrom
PolymerLabs:shadow-root-styles
Closed

Add CSS styles to classic editor when in a Web Component#7847
ywsang wants to merge 4 commits intockeditor:masterfrom
PolymerLabs:shadow-root-styles

Conversation

@ywsang
Copy link
Contributor

@ywsang ywsang commented Aug 14, 2020

Suggested merge commit message (convention)

Other (build-classic): Update webpack config to save styles to global array.
Change any CSS rules with the :root selector to :root, :host to accommodate Web Components.

Additional information

Related to #3891 and #1483.

By default, style-loader will add the CSS styles to the <head> of the document. However, document styles do not get applied to shadow roots as part of Shadow DOM's style encapsulation. Overriding the default behavior by providing a function to the insert option saves all of the styles in a global array in addition to adding them to the document <head> allows for adding the styles from the array into a shadow root after it's been initialized.

For example, if creating a web component with CKEditor, one could do the following in the constructor:

constructor() {
...
this.attachShadow( { mode: 'open' } );
  if ( window.ckeStylesToInject ) {
      window.ckeStylesToInject.forEach( style => {
        this.shadowRoot.prepend( style.cloneNode(true) );
      });
  } 
  ...
}

to add the styles to the shadow root.

This PR also changes any CSS rules with the :root selector to :root, :host, as :root doesn't select anything inside of a web component.

@Reinmar Reinmar self-requested a review August 17, 2020 08:00
@Reinmar
Copy link
Member

Reinmar commented Sep 15, 2020

Hi @ywsang! Sorry for the late reply here. 

This is an interesting approach. We'd need to add this snippet to all webpack configs (there are quite many of them :D) and cover this in the docs (in the advanced setup guide). 

What we'd need to be able to take over this from you is a sample of how you use CKEditor 5 in a shadow root and information on which browsers you test. If you could share that information, it'd ensure that we're looking at the same thing.

Reinmar
Reinmar requested changes Sep 15, 2020
View reviewed changes
Copy link
Member

@Reinmar Reinmar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As commented. Strongly related to #7846 (review).

This was referenced Oct 27, 2020
Closed
Closed
Closed
@CKEditorBot
Copy link
Collaborator

CKEditorBot commented Dec 15, 2023

There has been no activity on this PR for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the contribution, leave a comment or reaction under this PR.

@CKEditorBot
Copy link
Collaborator

CKEditorBot commented Jan 15, 2024

We've closed your PR due to inactivity over the last year. While time has passed, the core of your contribution might still be relevant. If you're able, consider reopening a similar PR.

@CKEditorBot CKEditorBot added resolution:expired This issue was closed due to lack of feedback. and removed status:stale labels Jan 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Reinmar Reinmar Reinmar requested changes

Assignees

No one assigned

Labels

resolution:expired This issue was closed due to lack of feedback.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@ywsang @Reinmar @CKEditorBot