How to use the @aurelia/runtime-html.AdoptedStyleSheetsStyles function in @aurelia/runtime-html

it('adopted styles merge sheets from parent', function () {
      const ctx = TestContext.createHTMLTestContext();
      const sharedCSS = '.my-class { color: red }';
      const localCSS = '.something-else { color: blue }';
      const root = { adoptedStyleSheets: [] };
      const cache = new Map();
      const sharedSheet = new ctx.dom.CSSStyleSheet();
      const localSheet = new ctx.dom.CSSStyleSheet();
      cache.set(sharedCSS, sharedSheet);
      cache.set(localCSS, localSheet);

      const p = new AdoptedStyleSheetsStyles(ctx.dom, [sharedCSS], cache, null);
      const s = new AdoptedStyleSheetsStyles(ctx.dom, [localCSS], cache, p);
      s.applyTo(root as any);

      assert.equal(root.adoptedStyleSheets.length, 2);
      assert.strictEqual(root.adoptedStyleSheets[0], sharedSheet);
      assert.strictEqual(root.adoptedStyleSheets[1], localSheet);
    });
  });

it('adopted styles apply parent styles', function () {
      const ctx = TestContext.createHTMLTestContext();
      const root = { adoptedStyleSheets: [] };
      const fake = {
        wasCalled: false,
        applyTo() { this.wasCalled = true; }
      };

      const s = new AdoptedStyleSheetsStyles(ctx.dom, [], new Map(), fake);
      s.applyTo(root as any);

      assert.equal(fake.wasCalled, true);
    });

it('adopted styles apply by setting adopted style sheets on shadow root', function () {
      const css = '.my-class { color: red }';
      const root = { adoptedStyleSheets: [] };
      const ctx = TestContext.createHTMLTestContext();

      const s = new AdoptedStyleSheetsStyles(ctx.dom, [css], new Map(), null);
      s.applyTo(root as any);

      assert.equal(root.adoptedStyleSheets.length, 1);
      assert.instanceOf(root.adoptedStyleSheets[0], ctx.dom.CSSStyleSheet);
    });

it('adopted styles merge sheets from parent', function () {
      const ctx = TestContext.createHTMLTestContext();
      const sharedCSS = '.my-class { color: red }';
      const localCSS = '.something-else { color: blue }';
      const root = { adoptedStyleSheets: [] };
      const cache = new Map();
      const sharedSheet = new ctx.dom.CSSStyleSheet();
      const localSheet = new ctx.dom.CSSStyleSheet();
      cache.set(sharedCSS, sharedSheet);
      cache.set(localCSS, localSheet);

      const p = new AdoptedStyleSheetsStyles(ctx.dom, [sharedCSS], cache, null);
      const s = new AdoptedStyleSheetsStyles(ctx.dom, [localCSS], cache, p);
      s.applyTo(root as any);

      assert.equal(root.adoptedStyleSheets.length, 2);
      assert.strictEqual(root.adoptedStyleSheets[0], sharedSheet);
      assert.strictEqual(root.adoptedStyleSheets[1], localSheet);
    });
  });

it('adopted styles use cached style sheets', function () {
      const ctx = TestContext.createHTMLTestContext();
      const css = '.my-class { color: red }';
      const root = { adoptedStyleSheets: [] };
      const cache = new Map();
      const sheet = new ctx.dom.CSSStyleSheet();
      cache.set(css, sheet);

      const s = new AdoptedStyleSheetsStyles(ctx.dom, [css], cache, null);
      s.applyTo(root as any);

      assert.equal(root.adoptedStyleSheets.length, 1);
      assert.strictEqual(root.adoptedStyleSheets[0], sheet);
    });