Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
wants to merge 4 commits into from
Closed

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

wants to merge 4 commits into from

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

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

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