Merge pull request #16 from rcoup/web-components-host

Support web components/shadow DOM.

scss/colors/utilities/_css-vars.scss

@@ -10,7 +10,8 @@
   $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 list.index(map.get(settings.$palette, "color-families"), $family) {

scss/components/_modal.scss

@@ -6,7 +6,8 @@
    * 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) {
+  #{$parent-selector} svg:not(:root),
+  #{$parent-selector} svg:not(:host) {
     overflow: hidden;
   }
 }

scss/layout/_document.scss

@@ -34,7 +34,8 @@
   // 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,14 +12,16 @@
   // 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]) {
+    :root:not([data-theme]),
+    :host(:not([data-theme])) {
       @include dark.theme;
     }
   }

scss/themes/default/_styles.scss

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