Difference between revisions of "Virtual Elements"

Revision as of 23:28, 3 April 2017

Virtual elements are created whenever CSS requires an element to be rendered but must not pollute the DOM. Importantly, virtual elements are ordered. For example, the virtual element created by ::after shows up after the 'real' element has been drawn. PowerUI handles this by storing all virtual elements in a SortedDictionary, indexed by a priority value. It's unique and constant for any given type of virtual element.

Accessing virtual elements

There's a web API for doing this which is supported - specifically the [1] method:

// Get the computed style for the '::after' selector on element:
var after = document.window.getComputedStyle(element,"after");

// (Then use e.g. after.Element)

// Or use the PowerUI convenience version:
var after = element.getComputedStyle("after");

For more advanced uses, you can directly access the set of virtual elements here:

// Get the virtuals set for 'element' (A HtmlElement):
Css.VirtualElements virtuals=element.Style.Computed.Virtuals;

Note that it's null if there aren't any.

The priority value

You'll notice that the virtuals set uses those arbitrary priority values. In order to obtain a particular virtual element, you'll need to know what its priority is - fortunately, they're constant for any given type of element:

What can I do with them?

They're completely ordinary elements which act exactly the same as a child of the element they're on. Essentially, you can do whatever you can normally do to elements to them too (The element itself is accessed from ComputedStyle.Element).