support named `@sheet`s

It should be possible to do this:

<head>
 <style>
   @sheet sheet1 {
    p { color: red; }
   }
   @sheet sheet2 {…}
   @sheet sheet3 {…}
 </style>
</head>

<my-component>
  <template shadowrootmode="open" adoptpagestyles="sheet1 sheet3">
   <nested-component>
     <template shadowrootmode="open" adopthoststyles>
       <p>This is red!</p>
     </template>
   </nested-component>
  </template>
</my-component>

From a "polyfill" perspective, implementing this would probably require a CSS-to-HTML transform which converts every @sheet into a separate <link rel="stylesheet">.

mayank99 / open-styleable

support named `@sheet`s #1