GoogleChromeLabs / GoogleChromeLabs/container-query-polyfill
Dynamic update <style> is not handled by polyfill
- 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
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