Support web components/shadow DOM.

Add :host to all uses of :root

Author: rcoup

scss/colors/utilities/_css-vars.scss

@@ -9,7 +9,7 @@
   $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
 
   @if $enable-css-vars {
-    :root {
+    :root, :host {
       // Loop through color families
       @each $family, $colors in colors.$colors {
         @if index(map.get(settings.$palette, "color-families"), $family) {

scss/components/_modal.scss

@@ -6,7 +6,7 @@
    * Modal (<dialog>)
    */
 
-  :root {
+  :root, :host {
     #{$css-var-prefix}scrollbar-width: 0px;
   }
 

scss/content/_embedded.scss

@@ -47,7 +47,8 @@
   }
 
   // Hide the overflow in IE
-  #{$parent-selector} svg:not(:root) {
-    overflow: hidden;
+  #{$parent-selector} svg:not(:root),
+  #{$parent-selector} svg:not(:host) {
+      overflow: hidden;
   }
 }

scss/layout/_document.scss

@@ -34,7 +34,7 @@
   // 3. Use a 4-space tab width in all browsers (opinionated)
   // 4. Remove the grey highlight on links in iOS (opinionated)
   // 5. Prevent adjustments of font size after orientation changes in iOS
-  :where(:root) {
+  :where(:root), :where(:host) {
     -webkit-tap-highlight-color: transparent; // 4
     -webkit-text-size-adjust: 100%; // 5
     text-size-adjust: 100%; // 5

scss/themes/default/_schemes.scss

@@ -12,15 +12,17 @@
   // Light color scheme (Default)
   // Can be forced with data-theme="light"
   [data-theme="light"],
-  :root:not([data-theme="dark"]) {
+  :root:not([data-theme="dark"]),
+  :host:not([data-theme="dark"]) {
     @include light.theme;
   }
 
   // Dark color scheme (Auto)
   // Automatically enabled if user has Dark mode enabled
   @media only screen and (prefers-color-scheme: dark) {
-    :root:not([data-theme]) {
-      @include dark.theme;
+    :root:not([data-theme]),
+    :host:not([data-theme]) {
+        @include dark.theme;
     }
   }
 

scss/themes/default/_styles.scss

@@ -9,7 +9,7 @@
    * Styles
    */
 
-  :root {
+  :root, :host {
     // Typography
     #{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
       "Noto Color Emoji";