css-toggle
css-toggle copied to clipboard
Nesting and toggle-trigger event propagation
Providing opportunity for any HTML element node to (technically) become active control element, this creates possibility to produce nested active structures.
Such structures were not technically possible (e.g. nested buttons, anchor tags, inputs) or were explicitly discouraged (mainly for accessibility reasons).
Should the toggle action on "activatable" element "bubble up", like HTML DOM events do in their second propagation stage?
data:text/html,<div tabindex="0" onkeypress="alert('outer')" onclick="onkeypress()">
Activation here alerts "outer".
<div tabindex="0" onkeypress="alert('inner')" onclick="onkeypress()">
Activation here alerts "inner", then "outer".
</div>
</div>
<style>div { padding: 1em; border: solid; }</style>
If so, could "inner" trigger produce effect that cancels out "outer" trigger (e.g. sets toggle state on body that disables toggle on "outer")?
Or should they propagate in opposite ("capture") direction? Or not propagate at all and be prevented to propagate from activatable element?
What if two or more nested elements have same toggle-trigger
target?