css-toggle icon indicating copy to clipboard operation
css-toggle copied to clipboard

Nesting and toggle-trigger event propagation

Open myfonj opened this issue 1 year ago • 2 comments

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?

myfonj avatar Oct 18 '22 23:10 myfonj