Add sheet attribute to the <link> tag's for CSS @sheet support

[KurtCattiSchmidt]

What is the issue with the HTML Standard?

The problem

CSS @sheet allows for defining multiple stylesheets in one CSS file. The CSSWG initially resolved to using fragment identifiers for applying @sheet definitions, but this solution will never work for same-document stylesheets. For context, here is an example of the original @sheet proposal using external .css files:

foo.css:

@sheet bar {
  p { color: green; }
}

...and then in a separate HTML file:

<link rel="stylesheet" href="foo.css#bar">

This will not work for local style references because fragment identifier references must match the MIME type of the element referenced. This means that @sheet will never work for inline/same-document CSS, as demonstrated in this example:

<style>
@sheet bar {
  p { color: green; }
}
</style>
<link rel="stylesheet" href="#bar">

The href above is invalid, since the MIME type of foo is CSS (due to it referencing an internal CSS identifier). This was discussed with the CSSWG at a recent F2F.

Use cases

• CSS @sheet with same-document sheet references
• Usage of @sheet with Declarative Shadow DOM for same-document styles
• This is a natural follow-up to the layer attribute on the <link> tag proposed here

Proposed Solution

Adding a sheet attribute to the link tag will solve these issues and allow for same-document style references. Here is an example with an external CSS file:

foo.css:

@sheet bar{
  p { color: green; }
}

<link rel="stylesheet' href="foo.css" sheet="bar">

In this example, the stylesheet associated with the <link> tag would contain the rules from the sheet "bar".

Combined with #11019, CSS @sheet could work with locally defined CSS as follows:

<style id="local_styles">
@sheet bar {
  p { color: green; }
}
</style>
<link rel="stylesheet' href="#local_styles" sheet="bar">

Prior Art

• Allow authors to apply new css features (like cascade layers) while linking stylesheets #7540

[noamr]

Notes from the WHATOT meeting: there is general support for this, once the @sheet proposal materializes.
A couple of things to flesh out in the spec:

1. A <link> element already has a sheet JS property, for CSSOM. So if this property is called sheet, it would collide. Would have to have a different property name or have an exception (like className or htmlFor)
2. Need to define how this works with mutability. Does the sheet get reloaded when the sheet attribute changes?

[robglidden]

A <link> element already has a sheet JS property, for CSSOM. So if this property is called sheet, it would collide. Would have to have a different property name or have an exception (like className or htmlFor).

@sheet is such an apt at-rule name, it would be a shame to not use it.

How about a "sheets" property, to reference one or more @sheets, which may be a common use case?

<link rel="stylesheet" href="#inline_styles" sheets="resets card-styles" />

The sheet property would then still be available to directly reach the underlying CSSStyleSheet included from LinkStyle.