Add an alternative solution for websites broken by adding any style tag

Issue Details

It's related to - https://github.com/AdguardTeam/CoreLibs/issues/492 There is another similar issue - https://github.com/AdguardTeam/AdguardFilters/issues/186661

The problem is that any cosmetic rule causes breakage. For example:

gxr.world###testRule
@@||gxr.world^$elemhide,extension,badfilter
@@||gxr.world^$generichide,extension

Proposed solution

Maybe as a workaround we could have an option (maybe additional modifier) to use adoptedStyleSheets (https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets) instead of injecting style tag? It seems that it doesn't cause breakage, at least on gxr.world.

Simple example:

(() => {
  if ("adoptedStyleSheets" in document) {
    try {
      const styleSheet = new CSSStyleSheet();
      styleSheet.replaceSync("#cc--main { display: none !important; } html:not(#style_important) { overflow-y: auto !important; }");
      document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];
    } catch (ex) {
      console.error(ex);
    }
  }
})();

Alternative solution

As another workaround we could have additional modifier, something like elemhide but only for injected style tag. I mean that we can use Extended CSS rules (#?#) but if there is a specific rule (or rules) we have to add:

@@||example.org^$generichide
example.org#@#specificRule1
example.org#@#specificRule2
example.org#?#extendedCSSRule

because $elemehide disables also Extended CSS rules.

If we would have something like $styleinject we could use just:

@@||example.org^$styleinject
example.org#?#extendedCSSRule

AdguardTeam / CoreLibs