[ssr] Fix unknown element attribute rendering #2344

aomarks · 2021-12-08T19:17:25Z

Fixes a bug where static attributes on custom elements would not render if the custom element was unregistered or did not have a renderer.

I considered a few ways to solve this and picked [2]. Open to switching to [1] or doing something else:

Don't emit custom-element-* opcodes at all for un-renderable elements. However, this would make getTemplateOpcodes dependent on renderInfo, and it seemed kind of nice to preserve the feature of getTemplateOpcodes being only a function of the template. If we did this, seems like we'd want to add the renderer instance to the custom-element-open opcode, so that we don't look up the renderer twice.
Add a new FallbackRenderer class which just tracks and renders attributes. This is what I picked, since it seemed pretty undisprutive, and it's sort of nice to not have to handle the undefined case as specially in the opcode render loop.
Add special tracking for unrenderable elements using a bag of attributes directly in the customElementInstanceStack stack, and add fallback logic to render static attributes in the custom-element-attributes switch case. This just seemed like a less clean way of writing [2].

Fixes #2321

changeset-bot · 2021-12-08T19:17:28Z

🦋 Changeset detected

Latest commit: dada6f2

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

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

github-actions · 2021-12-08T19:17:54Z

📊 Tachometer Benchmark Results

Summary

nop-update

lit-html-kitchen-sink: unsure 🔍 -3% - +0% (-0.74ms - +0.06ms)
^{this-change vs tip-of-tree}

render

lit-element-list: unsure 🔍 -2% - +1% (-1.35ms - +0.90ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -3% - +1% (-1.03ms - +0.36ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -1% - +4% (-0.09ms - +0.41ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -1% - +4% (-0.76ms - +2.47ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -3% - +2% (-2.00ms - +0.90ms)
^{this-change vs tip-of-tree}

update

lit-element-list: unsure 🔍 -2% - +0% (-17.18ms - +3.83ms)
^{this-change vs tip-of-tree}
lit-html-kitchen-sink: unsure 🔍 -3% - +3% (-2.92ms - +2.74ms)
^{this-change vs tip-of-tree}
lit-html-repeat: unsure 🔍 -3% - +1% (-9.42ms - +2.06ms)
^{this-change vs tip-of-tree}
lit-html-template-heavy: unsure 🔍 -2% - +2% (-2.45ms - +2.74ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -2% - +1% (-15.55ms - +7.75ms)
^{this-change vs tip-of-tree}

update-reflect

lit-element-list: unsure 🔍 -2% - +4% (-16.87ms - +39.55ms)
^{this-change vs tip-of-tree}
reactive-element-list: unsure 🔍 -1% - +1% (-12.89ms - +9.39ms)
^{this-change vs tip-of-tree}

Results

lit-element-list

Browser: chrome-headless 96.0.4664.45
Sample size: 50
Built by: Benchmarks #2118
Commit: 5235416

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	98.01ms - 100.80ms	-	unsure 🔍 -2% - +2% -2.01ms - +2.44ms	faster ✔ 21% - 24% 26.45ms - 30.92ms
tip-of-tree tip-of-tree	97.45ms - 100.92ms	unsure 🔍 -2% - +2% -2.44ms - +2.01ms	-	faster ✔ 21% - 24% 26.44ms - 31.36ms
previous-release previous-release	126.34ms - 129.84ms	slower ❌ 26% - 31% 26.45ms - 30.92ms	slower ❌ 26% - 32% 26.44ms - 31.36ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	906.19ms - 931.04ms	-	unsure 🔍 -2% - +1% -18.16ms - +13.25ms	faster ✔ 7% - 10% 65.87ms - 96.85ms
tip-of-tree tip-of-tree	911.47ms - 930.67ms	unsure 🔍 -1% - +2% -13.25ms - +18.16ms	-	faster ✔ 7% - 9% 65.57ms - 92.24ms
previous-release previous-release	990.73ms - 1009.22ms	slower ❌ 7% - 11% 65.87ms - 96.85ms	slower ❌ 7% - 10% 65.57ms - 92.24ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1004.06ms - 1024.56ms	-	unsure 🔍 -1% - +2% -13.21ms - +16.81ms	faster ✔ 4% - 7% 39.20ms - 72.00ms
tip-of-tree tip-of-tree	1001.54ms - 1023.48ms	unsure 🔍 -2% - +1% -16.81ms - +13.21ms	-	faster ✔ 4% - 7% 40.54ms - 74.26ms
previous-release previous-release	1057.11ms - 1082.71ms	slower ❌ 4% - 7% 39.20ms - 72.00ms	slower ❌ 4% - 7% 40.54ms - 74.26ms	-

lit-html-kitchen-sink

Browser: chrome-headless 96.0.4664.45
Sample size: 30
Built by: Benchmarks #2118
Commit: 5235416

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	41.90ms - 44.04ms	-	unsure 🔍 -3% - +3% -1.49ms - +1.43ms	faster ✔ 11% - 19% 5.44ms - 10.12ms
tip-of-tree tip-of-tree	42.01ms - 43.99ms	unsure 🔍 -3% - +3% -1.43ms - +1.49ms	-	faster ✔ 11% - 19% 5.45ms - 10.06ms
previous-release previous-release	48.68ms - 52.84ms	slower ❌ 12% - 24% 5.44ms - 10.12ms	slower ❌ 12% - 24% 5.45ms - 10.06ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	109.47ms - 115.29ms	-	unsure 🔍 -4% - +4% -4.92ms - +4.61ms	unsure 🔍 -6% - +1% -6.96ms - +1.45ms
tip-of-tree tip-of-tree	108.76ms - 116.31ms	unsure 🔍 -4% - +4% -4.61ms - +4.92ms	-	unsure 🔍 -6% - +2% -7.45ms - +2.24ms
previous-release previous-release	112.10ms - 118.17ms	unsure 🔍 -1% - +6% -1.45ms - +6.96ms	unsure 🔍 -2% - +7% -2.24ms - +7.45ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	33.62ms - 35.45ms	-	unsure 🔍 -6% - +5% -2.26ms - +1.62ms	faster ✔ 6% - 13% 2.05ms - 4.86ms
tip-of-tree tip-of-tree	33.15ms - 36.56ms	unsure 🔍 -5% - +7% -1.62ms - +2.26ms	-	faster ✔ 3% - 13% 1.12ms - 5.15ms
previous-release previous-release	36.92ms - 39.06ms	slower ❌ 6% - 14% 2.05ms - 4.86ms	slower ❌ 3% - 15% 1.12ms - 5.15ms	-

lit-html-repeat

Browser: chrome-headless 96.0.4664.45
Sample size: 30
Built by: Benchmarks #2118
Commit: 5235416

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	13.08ms - 14.05ms	-	unsure 🔍 -6% - +4% -0.80ms - +0.48ms	faster ✔ 7% - 15% 1.03ms - 2.38ms
tip-of-tree tip-of-tree	13.30ms - 14.14ms	unsure 🔍 -4% - +6% -0.48ms - +0.80ms	-	faster ✔ 6% - 14% 0.92ms - 2.18ms
previous-release previous-release	14.80ms - 15.74ms	slower ❌ 7% - 18% 1.03ms - 2.38ms	slower ❌ 6% - 16% 0.92ms - 2.18ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	342.83ms - 355.90ms	-	unsure 🔍 -2% - +3% -8.18ms - +10.90ms	faster ✔ 32% - 35% 166.66ms - 187.84ms
tip-of-tree tip-of-tree	341.05ms - 354.95ms	unsure 🔍 -3% - +2% -10.90ms - +8.18ms	-	faster ✔ 32% - 36% 167.76ms - 189.47ms
previous-release previous-release	518.28ms - 534.96ms	slower ❌ 47% - 54% 166.66ms - 187.84ms	slower ❌ 47% - 55% 167.76ms - 189.47ms	-

lit-html-template-heavy

Browser: chrome-headless 96.0.4664.45
Sample size: 50
Built by: Benchmarks #2118
Commit: 5235416

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	66.78ms - 69.67ms	-	unsure 🔍 -2% - +5% -1.02ms - +3.10ms	faster ✔ 17% - 22% 14.44ms - 19.04ms
tip-of-tree tip-of-tree	65.72ms - 68.65ms	unsure 🔍 -5% - +1% -3.10ms - +1.02ms	-	faster ✔ 19% - 23% 15.47ms - 20.09ms
previous-release previous-release	83.17ms - 86.75ms	slower ❌ 21% - 28% 14.44ms - 19.04ms	slower ❌ 23% - 30% 15.47ms - 20.09ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	141.78ms - 147.46ms	-	unsure 🔍 -5% - +1% -6.98ms - +1.93ms	faster ✔ 12% - 17% 19.40ms - 28.66ms
tip-of-tree tip-of-tree	143.71ms - 150.58ms	unsure 🔍 -1% - +5% -1.93ms - +6.98ms	-	faster ✔ 10% - 16% 16.49ms - 26.52ms
previous-release previous-release	165.00ms - 172.31ms	slower ❌ 13% - 20% 19.40ms - 28.66ms	slower ❌ 11% - 18% 16.49ms - 26.52ms	-

reactive-element-list

Browser: chrome-headless 96.0.4664.45
Sample size: 50
Built by: Benchmarks #2118
Commit: 5235416

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	70.08ms - 72.51ms	-	unsure 🔍 -3% - +2% -2.00ms - +1.45ms	unsure 🔍 -2% - +3% -1.05ms - +2.40ms
tip-of-tree tip-of-tree	70.35ms - 72.80ms	unsure 🔍 -2% - +3% -1.45ms - +2.00ms	-	unsure 🔍 -1% - +4% -0.78ms - +2.68ms
previous-release previous-release	69.39ms - 71.86ms	unsure 🔍 -3% - +1% -2.40ms - +1.05ms	unsure 🔍 -4% - +1% -2.68ms - +0.78ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	936.32ms - 968.69ms	-	unsure 🔍 -3% - +1% -32.99ms - +9.60ms	unsure 🔍 -3% - +2% -29.81ms - +18.05ms
tip-of-tree tip-of-tree	950.37ms - 978.04ms	unsure 🔍 -1% - +3% -9.60ms - +32.99ms	-	unsure 🔍 -2% - +3% -16.58ms - +28.23ms
previous-release previous-release	940.76ms - 976.01ms	unsure 🔍 -2% - +3% -18.05ms - +29.81ms	unsure 🔍 -3% - +2% -28.23ms - +16.58ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	1063.52ms - 1096.91ms	-	unsure 🔍 -3% - +2% -28.50ms - +19.88ms	unsure 🔍 -2% - +2% -22.71ms - +23.31ms
tip-of-tree tip-of-tree	1067.02ms - 1102.03ms	unsure 🔍 -2% - +3% -19.88ms - +28.50ms	-	unsure 🔍 -2% - +3% -18.99ms - +28.22ms
previous-release previous-release	1064.08ms - 1095.74ms	unsure 🔍 -2% - +2% -23.31ms - +22.71ms	unsure 🔍 -3% - +2% -28.22ms - +18.99ms	-

_{tachometer-reporter-action v2 for Benchmarks}

justinfagnani

🎉

kevinpschaaf

That reminds me, another reason to go for (2) over (1) is that it preserves the ability for an element renderer to match based on per-instance attributes (we pass op.staticAttributes for the instance to the getElementRenderer call at opcode execution time); looking up the renderer at opcode generation time would remove that flexibility. I thought we might use that for e.g. a client-side-only attribute to choose a FallbackRenderer that doesn't SSR).

So this seems good, at least until we refine the ElementRenderer matching concept and and how we decide to do client-side only components.

Fix bug where unknown element static attributes did not render

72599e8

aomarks requested review from justinfagnani and kevinpschaaf December 8, 2021 19:17

Add changeset

dada6f2

aomarks changed the title ~~Fix bug where unknown element static attributes did not render~~ [ssr] Fix unknown element attribute rendering Dec 8, 2021

justinfagnani approved these changes Dec 8, 2021

View reviewed changes

kevinpschaaf approved these changes Dec 8, 2021

View reviewed changes

aomarks merged commit bc46ddd into main Dec 8, 2021

aomarks deleted the ssr-attributes branch December 8, 2021 20:27

This was referenced Jan 5, 2022

Version Packages #2375

Closed

Version Packages #2377

Merged

snyk-bot mentioned this pull request Jan 16, 2022

[Snyk] Security upgrade marked from 0.3.12 to 4.0.10 tjenkinson/lit-html#17

Open

tjenkinson mentioned this pull request Sep 30, 2022

[Snyk] Fix for 11 vulnerabilities tjenkinson/lit-html#18

Open

[ssr] Fix unknown element attribute rendering #2344

[ssr] Fix unknown element attribute rendering #2344

Uh oh!

Conversation

aomarks commented Dec 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Dec 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Dec 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Tachometer Benchmark Results

Summary

nop-update

render

update

update-reflect

Results

render

update

update-reflect

render

update

nop-update

render

update

render

update

render

update

update-reflect

Uh oh!

justinfagnani left a comment

Choose a reason for hiding this comment

Uh oh!

kevinpschaaf left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

aomarks commented Dec 8, 2021 •

edited

Loading

changeset-bot bot commented Dec 8, 2021 •

edited

Loading

github-actions bot commented Dec 8, 2021 •

edited

Loading