From 24d21f39288806777b487fa2fdd5832ebc6c1b23 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Thu, 30 Nov 2023 10:21:29 +0000 Subject: [PATCH 1/2] add :host caveats to caveats section --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index e4932a1..511dd98 100644 --- a/README.md +++ b/README.md @@ -123,6 +123,13 @@ some caveats which will need accommodations: `shadowRoot`). You'll need to manually inject the styles yourself with `injectStyles(myShadow)`. + - As stylesheet is injected into the main document, if your host element is + a popover, styling with `:host` gets tricky, beause `:host` styles always + take lower precedence than the main document styles. This is a limitation + of CSS and there's not a reasonable workaround. The best workaround for + now is to add `!important` to conflicting properties in your `:host` rule. + See [#147](https://github.com/oddbird/popover-polyfill/issues/147) for more. + ## Contributing Visit our [contribution guidelines](https://github.com/oddbird/popover-polyfill/blob/main/CONTRIBUTING.md). From 46d41753917bf23ac9c5306cb700ef8d5243e70d Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Thu, 30 Nov 2023 10:25:52 +0000 Subject: [PATCH 2/2] fix typos --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 511dd98..8bc9147 100644 --- a/README.md +++ b/README.md @@ -123,8 +123,8 @@ some caveats which will need accommodations: `shadowRoot`). You'll need to manually inject the styles yourself with `injectStyles(myShadow)`. - - As stylesheet is injected into the main document, if your host element is - a popover, styling with `:host` gets tricky, beause `:host` styles always + - As a stylesheet is injected into the main document, if your host element is + a popover, styling with `:host` gets tricky beause `:host` styles always take lower precedence than the main document styles. This is a limitation of CSS and there's not a reasonable workaround. The best workaround for now is to add `!important` to conflicting properties in your `:host` rule.