Action on button inside shadow dom is not called.
hoIIer opened this issue · 7 comments
Greetings!
Not sure if this addon is actively maintained but I am using it to explore shadow-dom as a solution for encapsulating css etc.
I am able to render my app however when I click a button that has an action, the action is never called.
Is this a detail of shadow-dom itself? Have you encountered this?
Do you have some example code?
yeah I posted on discord but this is what I found so far:
this works:
<button
onclick={{action test}}
>
while this does not work:
<button
{{action test}}
>
Filed an issue with Ember.js here emberjs/ember.js#18303
@erichonkanen it looks like <button {{on 'click' this.clicked}}> works, so I'd use that for now. Will keep this open.
Official answer:
The way the {{action modifier works is by adding event handlers to the applications rootElement (most often body in non-tests), when the template will be rendered into a shadow root it is intentionally disconnected from the event bubbling that would eventually bubble to the document's body (or application rootElement if configured differently. This is a feature (of the shadow root system), not a bug. The reason onclick= works is because the event listener is attached directly to the element in question, and does not rely on any bubbling out of the shadow root.
The "correct" solution here would be to avoid both forms of {{action and use {{on universally.
@knownasilya thank you for the explanation, that makes sense! will start using the new on modifier
I'll document it.