From aa915c3e282aa9cc1fa835c52002eb1b571c5959 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Thu, 9 Jan 2025 10:23:23 -0500 Subject: [PATCH] Doc revisions --- docs/docs/themes.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/docs/themes.md b/docs/docs/themes.md index abd3a8af9..7f781a6a6 100644 --- a/docs/docs/themes.md +++ b/docs/docs/themes.md @@ -276,15 +276,19 @@ You can use these classes to apply a specific color scheme to an entire page or In pre-made themes, we use a light color scheme by default. -Additionally, styles may be scoped to the `:root` selector to be activated automatically. -For pre-made themes, *all* custom properties are scoped to `:root`, the theme class, and `wa-light`. +Additionally, styles may be scope to the `:root` selector to be activated automatically. +For pre-made themes, *all* custom properties are scoped to `:where(:root)`, the theme class, and `wa-light`. + +:::info +We use `:where(:root)` to give these styles 0 [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) so that they can be easily overridden. If you plan on using multiple themes in your project, we recommend doing the same for your custom themes. +::: Finally, we scope themes to `:host` and `:host-context()` to ensure the styles are applied to the shadow roots of custom elements. For example, the default theme is set up like this: ```css -:root, +:where(:root), :host, .wa-theme-default, .wa-light {