diff --git a/docs/assets/snippet-styles.css b/docs/assets/snippet-styles.css
index 8c09e40f8f1..0cd8f7f0f92 100644
--- 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
index 9beaf6552b7..953293d8a15 100644
--- 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
index 795651f060e..4d9b53ebcba 100644
--- 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
index 755b73c753a..d96cf0b31b5 100644
--- 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
index cb4f17c7f0f..ed8793e4673 100644
--- 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
index 86d66546136..ded25af659d 100644
--- 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
index dfc4d6e5a7d..256f0df7ad2 100644
--- 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
index efaed8c47ef..b86c675d67c 100644
--- 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
index 2cfbcddb49d..a8572771f3b 100644
--- 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
index 3d58fcb80e9..4cc606f8c00 100644
--- 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
index 12342041ca4..e81a402916b 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaembedediting.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaembedediting.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-media-embed-placeholder-icon-size: 3em;
 
 	--ck-color-media-embed-placeholder-url-text: hsl(0, 0%, 46%);
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-mention/mention.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-mention/mention.css
index 9cc6b90731e..26ab62bb0ad 100644
--- 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
index 15575f03c60..501c28905bf 100644
--- 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
index c9a41554f83..98d5c4301d7 100644
--- 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
index 444b5dc92fd..7e91e29d5e3 100644
--- 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
index 9463ad994ac..6d8d1d02969 100644
--- 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
index e04fd9bcfee..7f729ceec08 100644
--- 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
index 596ab177ef4..b7f1a521831 100644
--- 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
index baf3abc15d2..b00b9d3f9f2 100644
--- 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
index dfacab13466..d2c19596e1f 100644
--- 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
index bc8952e08d6..9898cb6d86d 100644
--- 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
index 8442ce36a3d..2c70c34eb27 100644
--- 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
index b8326cfb494..8eaa6a26209 100644
--- 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
index 4a244ecbcc3..9451374fe6f 100644
--- 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
index 0494f40737d..d1cde492a3a 100644
--- 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
index 45ee9ff7bb5..3d25ff5aa04 100644
--- 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
index dc9666ad735..5b77c396b92 100644
--- 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
index 2373a0429c5..feb643cd440 100644
--- 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
index 99e779dde91..8edd827fe7d 100644
--- 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
index 331d4c81769..3172c07ebc2 100644
--- 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
index 7a00b5cffbe..d61463ea58d 100644
--- 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
index 99af7d0b122..45e19540b9f 100644
--- 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
index 2211601bc7d..85e1ee6aaf2 100644
--- 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
index 4c7f4887d30..2772c3be99a 100644
--- 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
index a7941d2daba..c95e8966784 100644
--- 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
index 9c4e9b4cac2..969d9b5d253 100644
--- 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
index 64bcd2b73ef..509d11c5ec4 100644
--- 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
index d1553aec323..0c8709994a8 100644
--- 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
index ffa8c4b4382..0ea3a6b25e0 100644
--- 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
index 6f9b3c1c2a2..52a8da46aed 100644
--- 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
index aa5f1e5aacb..eafef7d5d91 100644
--- 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);
 }
diff --git a/packages/ckeditor5-ui/theme/globals/_zindex.css b/packages/ckeditor5-ui/theme/globals/_zindex.css
index 5adc37ba483..55427d112fb 100644
--- a/packages/ckeditor5-ui/theme/globals/_zindex.css
+++ b/packages/ckeditor5-ui/theme/globals/_zindex.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-z-default: 1;
 	--ck-z-modal: calc( var(--ck-z-default) + 999 );
 }
diff --git a/packages/ckeditor5-widget/theme/widget.css b/packages/ckeditor5-widget/theme/widget.css
index d79e092a6ab..e33b7003461 100644
--- a/packages/ckeditor5-widget/theme/widget.css
+++ b/packages/ckeditor5-widget/theme/widget.css
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-:root {
+:root, :host {
 	--ck-color-resizer: var(--ck-color-focus-border);
 	--ck-resizer-size: 10px;
 	--ck-resizer-border-width: 1px;