- From: James Browning <notifications@github.com>
- Date: Mon, 14 Dec 2020 00:42:10 -0800
- To: WICG/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <WICG/webcomponents/issues/909/744278581@github.com>
I am wary of the all-or-nothingness of `open-stylable` in two ways as it basically makes it impossible to actually isolate *some styles*. e.g. Suppose you want to use tailwind at the root level, this means that every shadow root needs to be `open-stylable`. But now what do I do if I want to isolate styles to a shadow root? If I add the following sheet to my shadow root: ```html <style> #container { --some-styles: some-values; } </style> ``` Then I have unintentionally targeted any element that happens to use `id="container"` within nested components. --- My inclination is that the best way for dealing with stylesheets not designed for shadow roots is just to do what @matthewp suggested and add the stylesheets that need to be inherited into each root. I think it would be good though if `StyleSheet` and `StyleSheetList` had change events so that we could respond to changes more accurately. (This would be useful beyond this use case as well, e.g. for building things like `StyleObserver`, etc). > they might not know what context they're running in exactly - what specific style sheets are used - but they might know that the existing DOM they're replacing is styled via certain class names. This is another place where an API would be nice, e.g. give it an element and gets a list of rules that target that element e.g.: ```js const el = document.createElement("div"); el.classList.add("my-class"); document.getMatchingRules({ element: el, // Allow matching rules if it were in the DOM, without actually needing to add it to the DOM where: { anchorElement: document.body, relativePosition: "child", // Or nextSibling, previousSibling etc }, }); ``` Like above, this would be more generally useful for building things like `StyleObserver`, css polyfills/extensions/etc. -- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/WICG/webcomponents/issues/909#issuecomment-744278581
Received on Monday, 14 December 2020 08:42:23 UTC