Polymer web component content click event not firing

Question

I've just created my first element as a test and I'm running into an issue with an on-click event. My element is simply a button with a click event to increment a counter which is displayed as part of the button text. I've also added a content tag so you can add additional text to the button.

When I go to click the button in Chrome, if I click on the content text, the click event isn't fired. I have to actually click on the button element / the count in the button to fire the event. All seems to be working properly though in Firefox, Safari and Opera. I can click anywhere on the button in those browsers and the click event will fire. Am I doing something wrong? Is this just a bug with Chrome? Here is my code:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Test Element</title>
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="elements/my-counter.html">
</head>
<body unresolved touch-action="auto">
    <my-counter count=5>Times a Day</my-counter>
</body>
</html>

elements/my-counter.html

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="my-counter" attributes="count">
    <template>
        <button on-click="{{increment}}">{{ count }} <content></content></button>
    </template>
    <script>
    Polymer('my-counter', {
        count: 0,
        increment: function(event, detail, sender) {
            console.log(event, detail, sender);
            ++this.count;
        }
    });
    </script>
</polymer-element>

This code is also on GitHub if you would like to download it and test it yourself: https://github.com/andersryanc/playing-with-polymer/tree/master/my-counter

score 2 · Accepted Answer · edited May 23 '17 at 12:20

If you wrap your extra text in a span it works.

<my-counter><span>Times a Day</span></my-counter>

See this JSbin.

I guess this is related to the fact that textNodesdon't fire most events (see here). If you mix LightDOM and ShadowDOM with events, make sure you read this article and this SO thread.

The reason that your code behaves differently in Chrome vs other browsers is that Chrome is currently the only browser shipping a native shadow dom implementation. Firefox is set to ship theirs in a couple weeks. More up to date info here: caniuseit - shadowdom

Polymer web component content click event not firing

1 Answers1