> 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
Thank you for filing. The appropriate engineers have been notified.
<rdar://problem/83769337>
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
There is a reasonable usage in between 0.45% and 0.67% https://chromestatus.com/metrics/feature/timeline/popularity/2845
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 :-)
*** This bug has been marked as a duplicate of bug 245579 ***