[BUG] Polyfill State Management

[czyrok]

Describe the bug

The polyfill fails to work correctly in a Single Page Application (SPA). My SPA has two pages, each with a dropdown menu that relies on the polyfill. When I navigate from the first page to the second, the dropdown menu on the second page is not processed by the polyfill.

I understand there are limitations with dynamically added/removed anchors or targets, and these limitations also affect SPAs. While a simple fix might be to rerun the polyfill function, this approach also fails due to two specific behaviors of the polyfill:

• The polyfill replaces loaded style files containing anchor() properties.
• The autoUpdate methods are never cleaned up.

The feature of handling the dynamically added/removed anchors or targets is very interesting, but the core issue lies in the polyfill’s state management (see the problematic behaviors above).

To Reproduce

Steps to reproduce the behavior:

1. Create an SPA with 2 pages (Note: The SPA must load the polyfill)
2. Add a dropdown menu to each page
3. Navigate to the first page and confirm the polyfill works.
4. Navigate to the second page without reloading and observe that the polyfill fails.

Browsers tested on

Firefox, Safari
(Note: The issue is related to the polyfill’s state management, so browser choice is irrelevant.)

Workaround

I analyzed the polyfill’s code and found a workaround.

First, I addressed the problematic behaviors:

• I used an event listener to determine when the autoUpdate method needs to be cleaned.
• For the style file replacement issue, I modified the code to “override” the style instead of replacing it. Specifically, I generate a new style (without removing the old one) and add a data-generated-by-polyfill attribute, similar to the CSS already generated by the polyfill.

Secondly, I monitor document.location.url, and when the URL changes:

• Trigger the cleanup of autoUpdate methods
• Remove all previously generated styles (those with the data-generated-by-polyfill attribute)

[jamesnw]

Thanks for submitting! There are a few interconnected issues mentioned here, I'll try to identify them, but let me know if I'm missing anything.

1. The autoUpdate cleanup issue is tracked in [BUG] Autoupdate functionality should clean up after itself. #240.
2. I think this is exactly the dynamic element issue tracked in applying the polyfill to dynamic elements #91. Your SPA is adding and removing elements, and the polyfill isn't tracking those.
3. The idea to keep the original styles in the DOM is in Allow original styleheet to remain in head #331

If you are interested, we would welcome PRs- I think an option to leave original styles in the DOM is the most straightforward. Exposing a cleanup function (potentially on a per-positioned-element basis) could also be useful, and some of that work was started in #123.

Are there other portions of this bug report that are missing? If not, I'll close this as a duplicate.