search

Active-CSS / active-css

The epic event-driven browser language for UI with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?
https://activecss.org
Other
42 stars 7 forks source link

Clickoutside event not working on shadow DOM element #116

Closed bob2517 closed 3 years ago

bob2517 commented 3 years ago

Clickoutside has never working with shadow DOM inner elements - it's an older feature. No reason why it can't though. It's understandable that it doesn't work, as that's part of the point of shadow DOMs - to stop the outside events from getting in the shadow DOM itself. Anyway, it got missed.

Basically if you click on a shadow DOM inner element with clickoutside set to work specifically on an inner element, it triggers a click on the shadow DOM itself, which is of course always outside the inner element.

In Active CSS each shadow DOM gets it's own set of event handlers - that's how the components seamlessly work with events. So clickoutside needs to tie into the clickoutside functionality and work as expected. This doesn't violate the point of shadow DOM event encapsulation at a native level. Clicking outside an element should be clicking outside an element - no other implications to consider.

I need this fixed next to get the todo app working on the front-page of the docs site as I've put a version there that isn't in the code editor and so it's inside a shadow DOM so that the CSS for that doesn't clash with the rest of the website. There is a todo app version inside a code editor on the new docs site on a different page which works fine, as it's in an iframe and not a shadow DOM.

bob2517 commented 3 years ago

Back on this now. Target is to get this particular issue done by the end of the day, then wrap up the rest of the issues for 2.5.0 at the weekend and then if all goes well update the docs site and go live by next wednesday.

bob2517 commented 3 years ago

Done offline - real quick fix. WIll commit in a mo.

bob2517 commented 3 years ago

There's another issue with the clickoutside event running multiple times when used inside a shadow DOM. Fixing this now as part of this issue.

bob2517 commented 3 years ago

Bollocks. It's not the core, it's the bloomin' docs website trying to be clever with the examples. At least it's not the core though. [edit] Gosh, looking at it, there must have been double configs being loaded in places. Doh. Talk about shooting yourself in the foot.

bob2517 commented 3 years ago

There was an issue that sneaked in when intercepting new inline config from devtools which was causing multiple configs being loaded, as well as the docs site sometimes producing two copies. Core fix is done on the branch and the docs site is fixed, so I'm closing this.