Update Preflight html styles to include shadow DOM :host pseudo-class (#11200)

* Extend current preflight `html` styles to support other root/host scopes

Supports SVG root scope, ShadowDOM, and presumably other root scopes

* Replace `:root` with `html`

* Update tests

* Update changelog

---------

Co-authored-by: Jonathan Reinink <[email protected]>

Author: brandonmcconnell

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `text-wrap` utilities including `text-balance` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320))
 - Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist ([#11402](https://github.com/tailwindlabs/tailwindcss/pull/11402), [#11412](https://github.com/tailwindlabs/tailwindcss/pull/11412))
 - Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832))
+- Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200))
 
 ### Changed
 

src/css/preflight.css

@@ -26,7 +26,8 @@
 6. Use the user's configured `sans` font-variation-settings by default.
 */
 
-html {
+html,
+:host {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */

tests/plugins/__snapshots__/preflight.test.js.snap

@@ -11,7 +11,7 @@ exports[`should test the 'preflight' plugin 1`] = `
   --tw-content: "";
 }
 
-html {
+html, :host {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
   font-feature-settings: normal;
@@ -208,7 +208,7 @@ exports[`should test the 'preflight' plugin 2`] = `
   --tw-content: "";
 }
 
-html {
+html, :host {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
   font-feature-settings: normal;