Add HTMLLinkElement.prototype.use apply shared style in Declarative Shadow DOM

[mantou132]

What problem are you trying to solve?

Shadow DOM use adoptedStylesheets apply shared style.

Declarative Shadow DOM no corresponding way

What solutions exist today?

Use external style sheet:

<link ref="stylesheet" href="...">

How would you solve it?

Use <link rel="stylesheet" use=""> 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 })

Anything else?

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)

[annevk]

I think we should solve declarative custom elements instead. Requiring declarative shadow root duplication, but not requiring style sheet duplication seems like a rather inconsistent end state.