Difference between revisions of "Virtual Elements"
Line 1: | Line 1: | ||
− | 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 | + | 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 the virtual element set == | == Accessing the virtual element set == |
Revision as of 19:45, 13 January 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 the virtual element set
There's a web API for doing this - specifically the element.getComputedStyle("after") method, which is supported. The set itself is:
// 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:
Virtual Element | Priority (C# const) |
---|---|
Horizontal scrollbar | ComputedStyle.HorizontalScrollPriority |
Vertical scrollbar | ComputedStyle.VerticalScrollPriority |
::before | BeforeSelector.Priority |
::after | AfterSelector.Priority |
::marker | MarkerSelector.Priority |