ckeditor · ywsang · Jul 30, 2020 · Jul 31, 2020 · Aug 10, 2020 · Aug 14, 2020
diff --git a/docs/assets/snippet-styles.css b/docs/assets/snippet-styles.css
@@ -2,14 +2,14 @@
  * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  */
 
-:root {
+:root, :host {
 	/* This custom property is read by the JS and passed to editor configurations
 	as config.toolbar.viewportTopOffset. */
 	--ck-snippet-viewport-top-offset: 100
 }
 
 @media (max-width: 960px) {
-	:root {
+	:root, :host {
 		/* The mobile layout of Umberto is different and the toolbar offset must be
 		smaller (https://github.com/ckeditor/ckeditor5/issues/1348). */
 		--ck-snippet-viewport-top-offset: 55;

diff --git a/packages/ckeditor5-build-classic/webpack.config.js b/packages/ckeditor5-build-classic/webpack.config.js
@@ -6,6 +6,7 @@
 'use strict';
 
 /* eslint-env node */
+/* global window, document */
 
 const path = require( 'path' );
 const webpack = require( 'webpack' );
@@ -72,6 +73,17 @@ module.exports = {
 							injectType: 'singletonStyleTag',
 							attributes: {
 								'data-cke': true
+							},
+							// In order to support CKEditor running in a shadow root, save all of the style elements into an
+							// array so that they can be added to a shadow root by accessing the array. If the style elements
+							// were only added to the document head (the default behavior of style-loader), the styles would
+							// not get applied to an editor in a shadow root due to style encapsulation.
+							insert: function addToStyles( styleElement ) {
+								if ( !window.ckeStylesToInject ) {
+									window.ckeStylesToInject = [];
+								}
+								window.ckeStylesToInject.push( styleElement );
+								document.head.prepend( styleElement );
 							}
 						}
 					},

diff --git a/packages/ckeditor5-highlight/theme/highlight.css b/packages/ckeditor5-highlight/theme/highlight.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-highlight-marker-yellow: hsl(60, 97%, 73%);
 	--ck-highlight-marker-green: hsl(120, 93%, 68%);
 	--ck-highlight-marker-pink: hsl(345, 96%, 73%);

diff --git a/packages/ckeditor5-image/theme/imagestyle.css b/packages/ckeditor5-image/theme/imagestyle.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-image-style-spacing: 1.5em;
 }
 

diff --git a/packages/ckeditor5-list/theme/todolist.css b/packages/ckeditor5-list/theme/todolist.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-todo-list-checkmark-size: 16px;
 }
 

diff --git a/packages/ckeditor5-mention/theme/mentionui.css b/packages/ckeditor5-mention/theme/mentionui.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-mention-list-max-height: 300px;
 }
 

diff --git a/packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css b/packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host{
 	/* Overrides the border radius setting in the theme. */
 	--ck-border-radius: 4px;
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-code-block/codeblock.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-code-block/codeblock.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-color-code-block-label-background: hsl(0, 0%, 46%);
 }
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-color-image-upload-icon: hsl(0, 0%, 100%);
 	--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadloader.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadloader.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-color-upload-placeholder-loader: hsl(0, 0%, 70%);
 	--ck-upload-placeholder-loader-size: 32px;
 }

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaembedediting.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaembedediting.css
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-mention/mention.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-mention/mention.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
 	--ck-color-mention-text: hsl(341, 100%, 30%);
 }

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-restricted-editing/restrictedediting.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-restricted-editing/restrictedediting.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-color-restricted-editing-exception-background: hsla(31, 100%, 65%, .2);
 	--ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35);
 	--ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4);

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-special-characters/charactergrid.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-special-characters/charactergrid.css
@@ -5,7 +5,7 @@
 
 @import "../mixins/_rounded.css";
 
-:root {
+:root, :host {
 	--ck-character-grid-tile-size: 24px;
 }
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-table/inserttable.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-table/inserttable.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-insert-table-dropdown-padding: 10px;
 	--ck-insert-table-dropdown-box-height: 11px;
 	--ck-insert-table-dropdown-box-width: 12px;

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableediting.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-color-table-focused-cell-background: hsla(208, 90%, 80%, .3);
 }
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableform.css
@@ -5,7 +5,7 @@
 
 @import "../mixins/_rounded.css";
 
-:root {
+:root, :host {
 	--ck-table-properties-error-arrow-size: 6px;
 	--ck-table-properties-min-error-width: 150px;
 }

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableselection.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableselection.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-table-selected-cell-background: hsla(208, 90%, 80%, .3);
 }
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/switchbutton.css
@@ -10,7 +10,7 @@
 /* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
 of the component, floating–point numbers have been used which, for the default font size
 (see: --ck-font-size-base), will generate simple integers. */
-:root {
+:root, :host {
 	/* 34px at 13px font-size */
 	--ck-switch-button-toggle-width: 2.6153846154em;
 	/* 14px at 13px font-size */

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorgrid/colorgrid.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorgrid/colorgrid.css
@@ -5,7 +5,7 @@
 
 @import "../../../mixins/_rounded.css";
 
-:root {
+:root, :host {
 	--ck-color-grid-tile-size: 24px;
 
 	/* Not using global colors here because these may change but some colors in a pallette

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css
@@ -8,7 +8,7 @@
 @import "../../../mixins/_shadow.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
-:root {
+:root, :host {
 	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
 }
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css
@@ -5,7 +5,7 @@
 
 @import "../../../mixins/_rounded.css";
 
-:root {
+:root, :host {
 	--ck-color-split-button-hover-background: hsl(0, 0%, 92%);
 	--ck-color-split-button-hover-border: hsl(0, 0%, 70%);
 }

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css
@@ -9,7 +9,7 @@
 @import "../../../mixins/_focus.css";
 @import "../../mixins/_button.css";
 
-:root {
+:root, :host {
 	--ck-color-editable-blur-selection: hsl(0, 0%, 85%);
 }
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/formheader/formheader.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/formheader/formheader.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-form-header-height: 38px;
 }
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon/icon.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon/icon.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
 }
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css
@@ -7,7 +7,7 @@
 @import "../../../mixins/_focus.css";
 @import "../../../mixins/_shadow.css";
 
-:root {
+:root, :host {
 	--ck-input-text-width: 18em;
 }
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css
@@ -6,7 +6,7 @@
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_shadow.css";
 
-:root {
+:root, :host {
 	--ck-balloon-arrow-offset: 2px;
 	--ck-balloon-arrow-height: 10px;
 	--ck-balloon-arrow-half-width: 8px;

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/fakepanel.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/fakepanel.css
@@ -5,7 +5,7 @@
 
 @import "../../../mixins/_shadow.css";
 
-:root {
+:root, :host {
 	--ck-balloon-fake-panel-offset-horizontal: 6px;
 	--ck-balloon-fake-panel-offset-vertical: 6px;
 }

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/blocktoolbar.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/blocktoolbar.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-color-block-toolbar-button: var(--ck-color-text);
 	--ck-block-toolbar-button-size: var(--ck-font-size-normal);
 }

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css
@@ -5,7 +5,7 @@
 
 @import "../../../mixins/_rounded.css";
 
-:root {
+:root, :host {
 	--ck-tooltip-arrow-size: 5px;
 }
 

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-color-base-foreground: 								hsl(0, 0%, 98%);
 	--ck-color-base-background: 								hsl(0, 0%, 100%);
 	--ck-color-base-border: 									hsl(0, 0%, 77%);

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_disabled.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_disabled.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	/**
 	 * An opacity value of disabled UI item.
 	 */

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	/**
 	 * The geometry of the of focused element's outer shadow.
 	 */

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-font-size-base: 13px;
 	--ck-line-height-base: 1.84615;
 	--ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	/* This is super-important. This is **manually** adjusted so a button without an icon
 	is never smaller than a button with icon, additionally making sure that text-less buttons
 	are perfect squares. The value is also shared by other components which should stay "in-line"

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css
@@ -6,6 +6,6 @@
 /**
  * Default border-radius value.
  */
-:root{
+:root, :host{
 	--ck-border-radius: 2px;
 }
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	/**
 	 * A visual style of element's inner shadow (i.e. input).
 	 */

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-spacing-unit: 						0.6em;
 	--ck-spacing-large: 					calc(var(--ck-spacing-unit) * 1.5);
 	--ck-spacing-standard: 					var(--ck-spacing-unit);

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css
@@ -6,7 +6,7 @@
 @import "../mixins/_focus.css";
 @import "../mixins/_shadow.css";
 
-:root {
+:root, :host {
 	--ck-widget-outline-thickness: 3px;
 	--ck-widget-handler-icon-size: 16px;
 	--ck-widget-handler-animation-duration: 200ms;

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-widget-type-around-button-size: 20px;
 	--ck-color-widget-type-around-button-active: var(--ck-color-focus-border);
 	--ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border);

diff --git a/packages/ckeditor5-ui/theme/components/panel/balloonpanel.css b/packages/ckeditor5-ui/theme/components/panel/balloonpanel.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	/* Make sure the balloon arrow does not float over its children. */
 	--ck-balloon-panel-arrow-z-index: calc(var(--ck-z-default) - 3);
 }