Intercepting click events across Shadow DOM barrier

Question

In my application, I intercept clicks on links and turn them into AJAX calls in order to achieve Single-Page-App-iness. In jQuery this looks something like this:

$('#main').on('click', 'a[href]', function(e) {
  if (e.which == 2 || e.metaKey) return; // don't capture new tab clicks
  /* stuff */
});

Recently, however, I have begun using Custom Elements and Shadow DOM. The above code doesn't work on a tags which are in shadow trees, as the click event gets retargeted to the shadow host.

Is it possible to make the above code to work in order to intercept click events that occur in a shadow tree? If not, what is a best practice to continue to achieve this functionality?

Note: I am using Polymer Platform to polyfill Web Components (though not full Polymer).

Here's a [reproducible test case](http://jsbin.com/digeputu/1/edit?html,js,output) — CletusW, Jul 17 '14 at 22:28

Peter Burns · Answer 1 · 2014-09-18T15:49:15.867

1

In Polymer ≥0.4.0 you can use the /deep/ combinator:

$('#main').on('click', '* /deep/ a[href]', function() {
  if (e.which == 2 || e.metaKey) return; // don't capture new tab clicks
  /* stuff */
});

Note: This technique should be used sparingly, as it's potentially mucking about in the implementation of all components, including some parts of the web platform like <video> tags.

edited Sep 18 '14 at 15:49

answered Jul 17 '14 at 22:31

Peter Burns

44,401
7
38
56

The main problem with this is that you're registering a click handler on every individual `` tag instead of using event delegation. It'll work, but it's probably not efficient. – CletusW Jul 17 '14 at 22:33
Good point. From brief poking around it looks like jQuery doesn't choke on `/deep/` as I expected either, so maybe you can also do it the idiomatic jquery way with delegation. – Peter Burns Jul 17 '14 at 23:07
1

I think that may be alright, as I do checks on the URL to make sure it's HTTP(S), not a fragment reference, etc. So it shouldn't break – Yuri Sulyma Jul 18 '14 at 07:44
I've updated it to more closely match the original question and also to work across native and non-native shadow dom implementations. – Peter Burns Jul 18 '14 at 18:57
This doesn't work when window.ShadowDOMPolyfill is truthy (i.e. in Polymer Platform) – Yuri Sulyma Jul 28 '14 at 10:33
The Polymer platform >=0.4.0 now includes a polyfilled implementation for /deep/ - https://github.com/Polymer/ShadowDOM/commit/13e334d – Peter Burns Aug 31 '14 at 15:25

score 0 · Answer 2 · answered Jul 17 '14 at 22:38

0

Instead of hacking around your existing structure to make it act like a single-page app, you might want to design it that way from the beginning. That will give you the most of Web Component's awesomeness. Here's a demo (and source) of a single-page app using Polymer. Even if you don't want to use Polymer, you can probably use flatiron-director yourself to accomplish the same thing.

answered Jul 17 '14 at 22:38

CletusW

3,890
1
27
42

This is how I've been "designing it that way from the beginning" to be an SPA? Most of the page (including the custom elements) is user-generated content, so I can't control the markup. That demo doesn't work for me in Firefox. – Yuri Sulyma Jul 18 '14 at 03:44
Good point. If it's user-generated content, you might be stuck with Peter's answer. – CletusW Jul 18 '14 at 05:15

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

You probably want to use core-ajax to handle your ajax calls and some form of inter-components communication to update your custom element.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 28 '14 at 12:47

Renaud

4,569
7
41
72

This isn't a question about Polymer. It's about ShadowDOM/Web Components, which are polyfilled by Polymer *Platform*. – Yuri Sulyma Jul 29 '14 at 01:46

Intercepting click events across Shadow DOM barrier

3 Answers3