- From: Mayank <notifications@github.com>
- Date: Thu, 14 Mar 2024 13:12:26 -0700
- To: WICG/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
Received on Thursday, 14 March 2024 20:12:30 UTC
@rniwa I alluded to this earlier as well, but I'll elaborate:
By default, open-styleable will add all document styles to the shadowroot. I usually find this desirable, but lets say there is a case where I want to filter out some rogue third-party styles (e.g. from bootstrap).
Here’s what I would do:
1. In the document, move those styles into a cascade layer.
```css
@import “bootstrap.css” layer(thirdparty.bootstrap);
```
2. Inside the shadowroot (which includes all document styles), [revert that layer](https://www.mayank.co/blog/revert-layer).
```css
:host {
&, * {
@layer thirdparty.bootstrap {
all: revert-layer;
}
}
}
```
This may not be the "official" way of filtering stylesheets, but it is *one* way (there might be others too), and I don't think the absence of an official solution needs to block the initial proposal.
--
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/909#issuecomment-1998340223
You are receiving this because you are subscribed to this thread.
Message ID: <WICG/webcomponents/issues/909/1998340223@github.com>
Received on Thursday, 14 March 2024 20:12:30 UTC