These are chat archives for ractivejs/ractive
I've been using native Web Components a lot more, and I've been using events for data "out".
This works great, since it uses web-standard events for communication.
However, at the binding point between these components and Ractive, none of the events are catchable.
I'm required to go in and add every possible Web Component event to the Ractive
.events global registry.
Is there any way to have Ractive listen for any event coming from a DOM node?
I know that probably has tons of bad edge cases, but are there any ideas around this?
I don't believe so, but I'm not deeply experienced with this.
The only way I know of is binding via
addEventListener( "foo" ...)
on-*and it's not a "standard" event (e.g.
onclick) then it assigns the handler via
addEventListener( "foo" ...)and handles the detachment when unrendering etc.
onwhateverproperties that we use currently are more or less legacy
onwhateverproperties to your custom element instances
on-*to a function passed to
on*? That's very interesting.
'onwhatever' in elementreturns true, ractive considers it a valid dom event and will attach a listener
on-*get converted into a plain old
addEventListenercall for dom events
I had thought detecting CustomElements would be easy, but it's probably more complicated than I thought.
Of course you can get the node name from the node itself, and there's
customElements.whenDefined() but I suspect those would get pretty hairy.
customElements.get()to check for custom elements
element._shadowRootwould be available as an obvious flag
my-wrapperelement that has no visual representation.
shadowRootwould simply not be part of the prototype for non-custom elements, but that doesn't appear to be the case
shadowRootproperty, let me do a little digging
I don't think this actually changes anything, but may lend some more weight to just removing the "skip adding event listeners" logic...
In the Custom Elements specification, there's a provision for "Customized built-in elements."
That is, you can define custom logic (including events) on built-in elements, like:
<button is="my-custom-button-behavior-component">Magic Button</button>
This would upgrade this standard
<button> element with any custom logic, so it then opens up the entire DOM library of standard elements to emitting arbitrary events and exposing arbitrary properties and methods.