I didn't actually try it, but my guess is that Group draws into its graphics
layer, clearing what is there. SkinnableComponent doesn't draw, its skin
draws, so anything you draw into its graphics layer sticks around.
Why would the Group clear its graphical element when a visual element is added?
I am especially confused because behind the scenes the SkinnableContainer has a SkinPart called contentGroup (which is of type Group) which is presumably where the laying out of graphical and visual elements happens.
Why is the behavior different? I am trying to understand if there is something deeper going on here.
Group looks at all of its children and tries to aggregate to as few display
objects as possible.
When you wrote to the graphics of the SkinnableContainer, the aggregation of
the contentGroup uses the contentGroup's graphics layer, not the
SkinnableContainer's graphics layer.