Skip to content

[reactive-element] Assume native constructible stylesheet support #5120

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

Jump to bottom
Draft
justinfagnani wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[reactive-element] Assume native constructible stylesheet support #5120

justinfagnani wants to merge 1 commit into from

Conversation

@justinfagnani
Copy link
Collaborator

@justinfagnani justinfagnani commented Oct 13, 2025

DO NOT MERGE

Exploration of how much code we could remove if we assumed constructible stylesheet support, which is Baseline and available cross-browser since March 2023: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet

This change saves 650 bytes.

@changeset-bot
Copy link

changeset-bot bot commented Oct 13, 2025

⚠️ No Changeset found

Latest commit: 4f6e612

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Oct 13, 2025 •
edited
Loading

📊 Tachometer Benchmark Results

Summary

nop-update

  • this-change, tip-of-tree, previous-release: unsure 🔍 -6% - +9% (-0.74ms - +1.10ms)
    this-change vs tip-of-tree

render

  • this-change: 44.66ms - 58.05ms
  • this-change, tip-of-tree, previous-release: unsure 🔍 -5% - +5% (-0.92ms - +0.99ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +2% (-0.65ms - +0.74ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -6% - +57% (-1.45ms - +24.20ms)
    this-change vs tip-of-tree

update

  • this-change: 471.18ms - 478.40ms
  • this-change, tip-of-tree, previous-release: unsure 🔍 -4% - +5% (-1.67ms - +1.80ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +2% (-0.91ms - +1.55ms)
    this-change vs tip-of-tree
  • this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +1% (-12.71ms - +3.89ms)
    this-change vs tip-of-tree

update-reflect

  • this-change: 457.06ms - 461.63ms
  • this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +1% (-9.62ms - +7.13ms)
    this-change vs tip-of-tree

Results

this-change

render

VersionAvg timevs
44.66ms - 58.05ms-

update

VersionAvg timevs
471.18ms - 478.40ms-

update-reflect

VersionAvg timevs
457.06ms - 461.63ms-
this-change, tip-of-tree, previous-release

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
19.39ms - 20.88ms-unsure 🔍
-5% - +5%
-0.92ms - +0.99ms		unsure 🔍
-2% - +8%
-0.36ms - +1.46ms
tip-of-tree
tip-of-tree		19.50ms - 20.70msunsure 🔍
-5% - +5%
-0.99ms - +0.92ms		-unsure 🔍
-1% - +7%
-0.28ms - +1.31ms
previous-release
previous-release		19.06ms - 20.11msunsure 🔍
-7% - +2%
-1.46ms - +0.36ms		unsure 🔍
-6% - +1%
-1.31ms - +0.28ms		-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
35.98ms - 38.40ms-unsure 🔍
-4% - +5%
-1.67ms - +1.80ms		unsure 🔍
-5% - +3%
-2.03ms - +1.16ms
tip-of-tree
tip-of-tree		35.88ms - 38.36msunsure 🔍
-5% - +4%
-1.80ms - +1.67ms		-unsure 🔍
-6% - +3%
-2.12ms - +1.11ms
previous-release
previous-release		36.59ms - 38.66msunsure 🔍
-3% - +5%
-1.16ms - +2.03ms		unsure 🔍
-3% - +6%
-1.11ms - +2.12ms		-

nop-update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
12.29ms - 13.61ms-unsure 🔍
-6% - +9%
-0.74ms - +1.10ms		unsure 🔍
-0% - +15%
-0.01ms - +1.76ms
tip-of-tree
tip-of-tree		12.13ms - 13.41msunsure 🔍
-8% - +6%
-1.10ms - +0.74ms		-unsure 🔍
-2% - +13%
-0.17ms - +1.56ms
previous-release
previous-release		11.49ms - 12.66msunsure 🔍
-13% - -0%
-1.76ms - +0.01ms		unsure 🔍
-12% - +1%
-1.56ms - +0.17ms		-
this-change, tip-of-tree, previous-release

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
34.70ms - 35.71ms-unsure 🔍
-2% - +2%
-0.65ms - +0.74ms		unsure 🔍
-3% - +1%
-1.02ms - +0.39ms
tip-of-tree
tip-of-tree		34.68ms - 35.64msunsure 🔍
-2% - +2%
-0.74ms - +0.65ms		-unsure 🔍
-3% - +1%
-1.04ms - +0.33ms
previous-release
previous-release		35.03ms - 36.00msunsure 🔍
-1% - +3%
-0.39ms - +1.02ms		unsure 🔍
-1% - +3%
-0.33ms - +1.04ms		-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
71.64ms - 73.40ms-unsure 🔍
-1% - +2%
-0.91ms - +1.55ms		unsure 🔍
-2% - +2%
-1.35ms - +1.09ms
tip-of-tree
tip-of-tree		71.35ms - 73.06msunsure 🔍
-2% - +1%
-1.55ms - +0.91ms		-unsure 🔍
-2% - +1%
-1.65ms - +0.75ms
previous-release
previous-release		71.81ms - 73.50msunsure 🔍
-2% - +2%
-1.09ms - +1.35ms		unsure 🔍
-1% - +2%
-0.75ms - +1.65ms		-
this-change, tip-of-tree, previous-release

render

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
46.47ms - 66.02ms-unsure 🔍
-6% - +57%
-1.45ms - +24.20ms		unsure 🔍
-19% - +36%
-9.30ms - +17.92ms
tip-of-tree
tip-of-tree		36.56ms - 53.17msunsure 🔍
-40% - +0%
-24.20ms - +1.45ms		-unsure 🔍
-36% - +9%
-19.66ms - +5.53ms
previous-release
previous-release		42.46ms - 61.40msunsure 🔍
-31% - +16%
-17.92ms - +9.30ms		unsure 🔍
-14% - +46%
-5.53ms - +19.66ms		-

update

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
482.75ms - 495.34ms-unsure 🔍
-3% - +1%
-12.71ms - +3.89ms		unsure 🔍
-3% - +1%
-13.13ms - +3.86ms
tip-of-tree
tip-of-tree		488.05ms - 498.87msunsure 🔍
-1% - +3%
-3.89ms - +12.71ms		-unsure 🔍
-2% - +2%
-8.09ms - +7.64ms
previous-release
previous-release		487.98ms - 499.39msunsure 🔍
-1% - +3%
-3.86ms - +13.13ms		unsure 🔍
-2% - +2%
-7.64ms - +8.09ms		-

update-reflect

VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree		vs previous-release
previous-release
this-change
488.43ms - 499.40ms-unsure 🔍
-2% - +1%
-9.62ms - +7.13ms		unsure 🔍
-2% - +1%
-8.51ms - +7.09ms
tip-of-tree
tip-of-tree		488.84ms - 501.49msunsure 🔍
-1% - +2%
-7.13ms - +9.62ms		-unsure 🔍
-2% - +2%
-7.87ms - +8.94ms
previous-release
previous-release		489.09ms - 500.17msunsure 🔍
-1% - +2%
-7.09ms - +8.51ms		unsure 🔍
-2% - +2%
-8.94ms - +7.87ms		-

tachometer-reporter-action v2 for Benchmarks

@github-actions
Copy link
Contributor

github-actions bot commented Oct 13, 2025

The size of lit-html.js and lit-core.min.js are as expected.

rictic
rictic reviewed Oct 23, 2025
View reviewed changes
packages/reactive-element/src/css-tag.ts

// This is a getter so that it's lazy. In practice, this means stylesheets
// are not created until the first element instance is made.
get styleSheet(): CSSStyleSheet | undefined {
Copy link
Collaborator

@rictic rictic Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can just be CSSStyleSheet, we can drop the | undefined here.