Skip to content

[LinkTagModuleImport] Enhance explainer with shared stylesheets and blocking #1376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Joe Pea (trusktr) wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[LinkTagModuleImport] Enhance explainer with shared stylesheets and blocking #1376

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion LinkTagModuleImport/explainer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ In each of these cases, module `<link rel="stylesheet">` elements will apply
the existing constructed stylesheet behavior, rather than the behaviors of
classic `<link rel="stylesheet">` elements.

##### The Difference in Cardinality Changes the Behavior of Some Attributes
##### Shared stylesheets
Comment thread
trusktr marked this conversation as resolved.

Classic `<link rel="stylesheet">` elements have a one-to-one association with
their `CSSStyleSheet` objects. This proposal deliberately allows multiple
Expand All @@ -237,6 +237,19 @@ this scenario, including ignoring these attributes entirely (requiring them to
be set directly on the `CSSStyleSheet` object imperatively),
first-defined-wins, or last-defined-wins, each of which comes with tradeoffs.

##### Render blocking is opt-in

Unlike classic link stylesheet tags, module link stylesheet tags can be render blocking with the `blocking` attribute anywhere in the document, not only in the head, as a way to prevent FOUC:
Comment thread
trusktr marked this conversation as resolved.

```html
<link
rel="stylesheet"
type="module"
href="@some-org/some-lib"
blocking="render"
/>
```

##### Module Fetches Are Stricter Than Classic Fetches

Fetches for classic `<link rel="stylesheet">` elements and CSS module scripts
Expand Down