Implement CSSStyleSheet ReplaceSync() Functionality

• Component: CSS
• Status: RESOLVED DUPLICATE

[karl]

> The replaceSync() method of the CSSStyleSheet interface synchronously replaces the content of the stylesheet with the content passed into it.
See https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/replaceSync
And https://drafts.csswg.org/cssom/#dom-cssstylesheet-replacesync

The method is implemented in both Blink and Gecko.
On Firefox, the feature is not yet enabled on Nightly but available behind a flag.
https://bugzilla.mozilla.org/show_bug.cgi?id=1613746
https://bugzilla.mozilla.org/show_bug.cgi?id=1644101


This creates a webcompat issue on https://boxy-svg.com/app
which has a feature detection mechanism depending on 

```
    window.CSSStyleSheet.prototype.replaceSync   !== undefined &&
```

 https://webcompat.com/issues/88587

[Kevin Neal]

Thank you for filing. The appropriate engineers have been notified.

[Radar WebKit Bug Importer]

<rdar://problem/83769337>

[Karl Dubost]

I tried to use the app today for a project and realize it was not working.
And discovered I had already filed a bug for this. ^_^

This depends on implementing
https://drafts.csswg.org/cssom/#dom-cssstylesheet-replacesync

replaceSync can be found on GitHub here and there. 4754 occurrences, (probably not only the window.CSSStyleSheet.prototype.replaceSync) there can be similar function names in JS.
https://github.com/search?l=JavaScript&p=1&q=replacesync&type=Code

constructible stylesheets have now been enabled on all Firefox channels (May 2022).
https://bugzilla.mozilla.org/show_bug.cgi?id=1644102


https://caniuse.com/mdn-api_cssstylesheet_replacesync

[Karl Dubost]

There is a reasonable usage in between 0.45% and 0.67%
https://chromestatus.com/metrics/feature/timeline/popularity/2845

[serapath]

I was very surprised this web standard seems to work everywhere but Safari.

https://caniuse.com/mdn-api_cssstylesheet_replacesync

My company uses it in combination with 


const sheet = new CSSStyleSheet()
sheet.replaceSync(css)
const shadow = el.attachShadow({ mode: 'closed' })
shadow.adoptedStyleSheets = [sheet]


to create re-usable components that can be themed and even though the components were created in different contexts by different developers, the default css of each component will never clash with the css of other components.

Previously we had to either stricly follow conventions like BEM

Or we had to emply css-in-js libraries which prefix or postfix every selector with some sort of short hash to make sure it is unique and doesn't clash.

The technique above allows us to not bother anymore with conventions like BEM which work but require a lot of discipline on the side of developers and we also do not need to use css-in-js libraries anymore.

Please consider supporting this feature soon :-)

[Chris Dumez]

*** This bug has been marked as a duplicate of bug 245579 ***