construct stylesheet priority

[mantou132]

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  h1 {
    color: blue;
  }
`);

document.adoptedStyleSheets = [sheet];

document.body.innerHTML = `
  <style>
    h1 {
      color: red;
    }
  </style>
  <h1>title</h1>
`;

construct stylesheet overrides <style>.

but sometimes I don't want to override the style of <style> <link> in the code, I just want to construct stylesheet to work like a browser stylesheet. // case: <gem-frame>

is there a way to determine the priority of constructing stylesheet?

[nordzilla]

This was discussed and resolved here:
#93 (comment)

As of right now, constructed always go after other author sheets.

[mantou132]

use @layer can solve the problem:

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @layer { 
    h1 {
      color: blue;
    }
  }
`);

document.adoptedStyleSheets = [sheet];

document.body.innerHTML = `
  <style>
    h1 {
      color: red;
    }
  </style>
  <h1>title</h1>
`;