Re: [WICG/webcomponents] "open-stylable" Shadow Roots (#909)

@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