How to control the selectable and highlightable behaviour at run time for nested components?

[kmkaliraj]

I am trying to make the nested components interaction level by level. Only top level component is selectable and highlightable at first. Once its selected, the inner components at the next level will become selectable and highlightable. Continue the same until any level of nesting. Clicking outside the top component should reset the selectable and highlightable so that only the top level component can be selected. How can I achieve this?