Description

This is an alternate method of ensuring the correct value cascades in instances where multiple values for position-area apply to the same element.

.a #b{
  position-area: end;
}
.a .b{
  position-area: start;
}

This should resolve to end due to specificity.

In other parts of the polyfill, we can simply add properties to the same declaration blocks to ensure they cascade as expected. However, position-area requires us to add properties to a generated parent element of the selected element. This PR uses :where([parent]):not([original selector]) to properly handle the cascade.

The :where() selects the specific element, and the :not() applies that rule with the same specificity of the original selector. The example above creates the following selectors-

:where([parent]):not(.a #b){ /**rules **/}
:where([parent]):not(.a .b){ /**rules **/}

The alternate method, as implemented in #296, checks for a cascade winner each time the polyfill is updated. This requires an extra read and write of the DOM on each cycle, per target/position area combo. It also requires that we add an additional property to track the cascade. My initial impression is that this is a small impact relative to what the polyfill is already doing, but it would be convenient to simply rely on the cascade directly.

Related Issue(s)

#181

Steps to test/reproduce

In the demo, go to the Cascade example.
https://deploy-preview-307--anchor-polyfill.netlify.app/position-area#cascade
If you apply the polyfill, it will be positioned at top right. If you reload the page, click the "Switch cascade button", and apply the polyfill, it will be positioned at bottom right.

Caveats

1. This moves the earliest supported browsers to Chromium 88, Firefox 84, Safari 14, or roughly 4 years. This would only impact people using position-area, though.
2. This selector doesn't check if the original selector still applies. For instance, in the Cascade example, if you switch the cascade, apply the polyfill, and switch the cascade again, the .cascade-override class is no longer present in the document, but the :where([parent]):not(.cascade-override #cascade-target) selector still applies. Essentially this method picks the cascade winner of all the declarations that apply to elements that exist when the polyfill is initially applied.
3. This will not work for selectors that rely on the positioned element's location in the DOM tree, for instance ~ target, + target, > target or uses :nth selctors. (This applies to either approach due to the wrapping element)

Note that the current diff doesn't include some cleanup that could happen to remove the other method.

Comparison with the original approach