Skip to content
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

If an adopter disconnects in between animation frames, it throws an error during restyling #112

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

If an adopter disconnects in between animation frames, it throws an error during restyling #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9ae0c69
Check if nodes are connected after requestAnimationFrame callback
jorgea-stripe Jun 21, 2022
88b6ac2
Fix outdated browser error message in polyfill test
jorgea-stripe Jun 23, 2022
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
4 changes: 3 additions & 1 deletion src/ConstructedStyleSheet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,13 +120,15 @@ export function removeAdopterLocation(
/**
* Re-styles a single `<style>` adopter according to the basic style sheet.
*
* NOTE: don't use it for disconnected adopters. It will throw an error.
* NOTE: don't use it for disconnected adopters
*/
export function restyleAdopter(
sheet: ConstructedStyleSheet,
adopter: HTMLStyleElement,
): void {
requestAnimationFrame(() => {
// The adopter could have disconnected in between animation frames, so we recheck if it's still connected
if (!adopter.isConnected) return;
adopter.textContent = $basicStyleElement.get(sheet)!.textContent;
$appliedMethods
.get(sheet)!
Expand Down
2 changes: 1 addition & 1 deletion test/polyfill.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ describe('Constructible Style Sheets polyfill', () => {
globalStyle.sheet!.replace('.only-test { color: blue; }'),
).toBeRejectedWith(
new _DOMException(
"Can't call replace on non-constructed CSSStyleSheets.",
"Failed to execute 'replace' on 'CSSStyleSheet': Can't call replace on non-constructed CSSStyleSheets.",
),
);
});
Expand Down