GoogleChromeLabs / GoogleChromeLabs/container-query-polyfill

Dynamic update <style> is not handled by polyfill

Open
#76 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.1k
Forks
48
PR merge metrics
No merged PRs in 30d

Description

Hi,
I found out that when is dynamically updated with new css, polyfill doesn't handle it.

Example: https://stackblitz.com/edit/js-pkkkut?file=index.js,style.css,index.html,tsconfig.json

After some research I found that the polyfill should parse and apply polyfill logic again after <style> was updated

I've tried to do naive fix and implement `update` method for `StyleElementController`:
```
updated() {
this.controller?.abort()
this.connected();
}
```
But I'm not sure if it a right place to do it.

What is the proper way to make it handle this case?

Contributor guide

Open the contributing guide

Research direction

Start with the StyleElementController and reproduce the issue using the linked StackBlitz example, where a element receives new CSS dynamically. Trace how the polyfill parses and applies styles after initial processing. Done means dynamically updated style content is handled by the polyfill, with the example no longer showing the failure.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.