MicrosoftEdge / MicrosoftEdge/MSEdgeExplainers

[@sheet] Using stylesheets embedded in the element contents itself presents a potential performance risk

Open
#947 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

AtSheet
Dominant language
HTML
Stars
1.4k
Forks
286
Avg merge
3d 1h
Merged PRs (30d)
8

Description

As I spelled out in https://github.com/w3c/csswg-drafts/issues/11547, there's a serious perf risk embedding style-loading elements directly into the DOM in commonly used elements. The problem is that of stylesheet caching, because every sheet has to be calculated anew for every <style> and <link rel="stylesheet">. TL;DR:

Alternatively, I could inject all the global styles with duplicate <link rel="stylesheet">s. This comes with serious performance concerns: imagine a hundred posts on a TweetDeck-style UI for a microblogging site, each with <format-time> to format the time, <user-link> to format the username, and <format-text> to format the text. If you have 5 stylesheet tags on the site (say, normalize.css, your site's styles, Bootstrap, and a couple Bootstrap plugins) and want to use them all in that custom element's shadow DOM, that's 500 <link rel="stylesheet"> elements in that one page. The browser can cache style parsing per-URL to avoid the memory blow-up, but the browser can't avoid having to compute the entire stylesheet for every page, leading to high style compute times.

This is why, in https://github.com/whatwg/html/issues/10933 + https://github.com/w3c/csswg-drafts/issues/11547 (my proposed alternate solution), I don't embed URLs directly, but instead link to elements that have the needed data to load. There needs to be some way to ensure that the shared styles are not cloned, even if it's not the specific way I proposed.

I do like the idea of blending something like your @sheet blocks with my attribute-based linking, though. I'm envisioning those @sheet blocks in a global namespace, and maybe shadowrootadopt="foo bar ..." to add them to declarative shadow DOMs.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the linked WHATWG HTML issue 10933 and CSSWG issue 11547, then compare their proposed approaches for sharing styles across declarative shadow DOMs. The issue is complete only when a concrete mechanism is specified clearly enough to address stylesheet duplication and style-computation costs; no implementation files or tests are identified here.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.