Add HTMLLinkElement.prototype.use to handle adoptedStylesheets

[mantou132]

e.g:

<template id="style1">
  <style>
    * {
      color: red;
    }
  </style>
</template>
<template id="style2">
  <style>
    * {
      background: blue;
    }
  </style>
</template>
<my-element>
  <template shadowrootmode="open">
    <p>MyElement</p>
    <link rel="stylesheet" use="style1"></link>
  </template>
</my-element>
<link rel="stylesheet" use="style1"></link>
<link rel="stylesheet" use="style2"></link>

On the parser side, the style1 stylesheet will be applied to document and my-element#shadowRoot, and the style2 stylesheet will be only applied to document.

Advantage:

1. Backward compatibility
2. Strong expression ability, corresponding to DocumnetOrShadowRoot.adoptedStylesheets
3. No duplicate code will be generated during serialization

Serialization

For manual serialization of adoptedStylesheets while traversing the DOM, can control the id generation method. can also add argument option to getInnerHTML to specify the id generation method, e.g:

// Automatic generated
document.body.getInnerHTML({ convertAdoptedStylesheetsToTemplate: true })
// Specify generation method
document.body.getInnerHTML({ convertAdoptedStylesheetsToTemplate: Math.random })

[mantou132]

Other solution: let the link element href attribute support fragment-only URLs:

<link rel="stylesheet" href="#style1" />

But this conflicts with the SVG use element and CSS: WICG/webcomponents#772 (comment)

[mfreed7]

Thanks for the suggestion, but this repo is probably not the best place to file it. Declarative shadow DOM is now a web standard, so new issues and suggestions should be raised on the WHATWG repo.