[whatwg/dom] Support for building an optimal, nested CSSStylesheet programmatically (Issue #1442)

bahrus created an issue (whatwg/dom#1442)

### What problem are you trying to solve?

If a web component doesn't use ShadowDOM, but nevertheless wishes to provide a CSS Module to style the light children DOM elements that the web component generates, it would be natural, with the now shipping nested CSS support, to simply wrap the styles inside a selector that specifies the name of the custom element.  The problem is, especially with scoped custom element registries, that name may not be uniform across all usages.  Also, many web component libraries explicitly suggest a using separate file to specify the name of the custom element.



### What solutions exist today?

I asked Claude AI how it would do it.  It suggests:

```JavaScript
function nestStyleSheet(originalSheet, outerSelector) {
  const newSheet = new CSSStyleSheet();
  
  // Build nested CSS text
  let nestedRules = [];
  
  for (const rule of originalSheet.cssRules) {
    nestedRules.push(rule.cssText);
  }
  
  // Wrap all rules in the outer selector using nested CSS syntax
  const nestedCSS = `${outerSelector} {
  ${nestedRules.join('\n  ')}
}`;
  newSheet.replaceSync(nestedCSS);
  return newSheet;
}
```

This is probably all just fine, but I wonder if that means excessive string parsing?  The browser now needs to reparse the entire contents again, rather than just cloning parsed "nodes".

### How would you solve it?

Something like 

```JavaScript
   new CssStyleSheet("outerSelector", {extends: originalSheet}}
```

### Anything else?

_No response_

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1442
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/issues/1442@github.com>