Skip to content

Latest commit

 

History

History
18 lines (10 loc) · 1.45 KB

File metadata and controls

18 lines (10 loc) · 1.45 KB

:has() pseudo class matching

1. Matching :has argument to the downward subtree

To determine whether an element matches a :has() pseudo class or not, the style engine needs to match the argument of the :has() to the downward subtree of the element. match has pseudo class

2. Repetitive argument matching while style recalculation

During the style recalculation process, a selector in a style rule will be matched to the style invalid elements in the DOM to determine whether the style rule need to be applied to the elements to compute styles.

If the selector contains :has pseudo class, the :has() matching operation can generate a performance issue of repetitive argument matching when a style invalid element contains additional style invalid elements in it's downward subtree.

Repetitive argument matching while style recalculation

We can prevent the repetitive argument matching operations by caching the :has matching result. You can get the details from the previous document about :has matching prototyping.

Caching :has matching result to prevent repetitive matching