Pseudo-Class implementation.

[Tim-Liam-Hill]

Reading through the W3C Selectors Level 4 Draft here it states "They can also be dynamic, in the sense that an element can acquire or lose a pseudo-class while a user interacts with the document, without the document itself changing". My question is how, at a high level, would an implementation for this look?

The first thing that comes to mind is a list of rules with pseudo-class selectors is maintained and on any appropriate event the DOM nodes are updated to see if they match any such rule. As an example: if the pseudo-class is ":hover" and I have a div that on hover changes background, we would check for a hover any time the user's mouse moves.

This approach seems slow to me since you are repeating the process of matching rules to nodes over and over so my next thought is that pseudo-classes become attributes of their own for each node that they match. That is to say, when we parse a stylesheet and apply rules to a node, pseudo-class nodes aren't 'applied' but rather 'stored' and only applied later. This on the surface is more performant but also raises the question of how to undo an applied pseudo-class when it should no longer take affect (eg: user is no longer hovering over the div).

I have played around with the idea of implementing some basic pseudo-classes (most notably onhover) so any suggestions are appreciated!

[Tim-Liam-Hill]

On a related note: how would pseudo-element rules be applied? Taking the ::first-line element as an example, this cannot be applied to a node before the dom is created since we won't know which inline elements fit on the first line of a given block element until we have laid our nodes out. It seems to me that any rule containing a pseudo-element can only be 'matched' once the dom is constructed, making their implementation a lot more specific to internal DOM representation. It also seems to be very complicated to support

[chrishtr]

It seems to me that any rule containing a pseudo-element can only be 'matched' once the dom is constructed, making their implementation a lot more specific to internal DOM representation. It also seems to be very complicated to support

It is indeed complicated. To solve the problems you described, the browser can construct the layout object for the pseudo element at the same time it is constructing the layout tree, and only create them if there was a style rule referencing them. The style recalc algorithm also needs to be modified to compute the style for these pseudo elements as if they exist already, and store the result somewhere (perhaps in a data structure keyed by pseudo element name hanging off its parent DOM node) until the actual layout object for them is created.

[chrishtr]

My question is how, at a high level, would an implementation for this look?

One approach (which is what Chromium basically does) is to simply recompute style on every mouse move, based on the change of state for which element became hovered or not hovered. This sounds very slow (and it is very slow if implemented without optimizations), but can be highly optimized with the following techniques:

• Skip the whole algorithm if there is not a style rule referencing :hover
• Only recompute style when the hovered element actually changes, after doing the hit test for which element is hovered
• Only invalidate style for the elements that gained or lost potential hover state

With these optimizations, the work needed is just recomputing style on two elements, plus a single hit test. The hit test may be the most expensive part of these. But in practice (depending on the site), the worst problem may be the issue of forcing rendering in order to be able to hit test, which may cause layout thrashing. (I notice now that layout thrashing is not mentioned in the book; I'll take a note to add it.

[Tim-Liam-Hill]

Thanks for the feedback! I am surprised that Chromium does that but it does make sense. I didn't realise that forcing rendering and layout thrashing would be the bigger issues but I haven't started delving into the JS side of things yet so that is why I didn't think of them.