Events from elements inside shadow dom?


#1

I’m trying to capture a click event on any line number in any editor. This is the old code that used to work …

$('atom-pane-container').on 'click', '.line-number', (e) =>
  $tgt = $ e.target
 # do stuff with $tgt

The editor’s shadow DOM breaks this because events can’t cross a shadow DOM boundary. atom-pane-container is outside the editor’s shadow DOM.

Here is my attempt to fix this. It doesn’t work. No event is captured. Any ideas how I can fix this, or a better way to do this?

lineNumClickCallback = ->
  console.log 'lineNumClickCallback'

atom.workspace.observeTextEditors (editor) =>
  $(editor).on 'click', '.line-number', lineNumClickCallback

I have left out the disposable handling to make the test code simpler.


#2

Read the beginning here.
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/

click isn’t on the list that never cross the boundary.

For scroll though I did:

     atom.workspace.observeTextEditors (editor) =>
         editorView = atom.views.getView(editor)
         return if editorView.hidden

        editor.onDidChangeScrollTop =>
            @clear()
        editor.onDidChangeScrollLeft =>
            @clear()

#3

Sorry, I don’t have the specific answer, for my case, I was still able to leave alone some of the code so the diff looked like:

     $(@workspaceElement).find '*'

- .on ‘mousedown scroll’, (e) =>
+ .on ‘mousedown’, =>
@clear()

So, There might be a onDidClick() but I wasn’t able to find it! Please let us know whatever you end up doing!


#4

@postcasio answered the issue I created on atom/atom. See https://github.com/atom/atom/issues/4908.

There are several easy ways to solve this.


#5

Oops, I didn’t know you were trying to get the shadow’d element. I should have sent this article (really good read):
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

The 301 one though talks a lot about how they bubble, etc.

Also, for a lot of purposes /deep/ will be useful. Also there’s a ::content too for composed elements etc.


#6

Hey guys, little trick I just figured out.

In chrome inspector underneath inspect, the long line of css selector paths (xpath like thing) is REALLY useful for shadow dom. Basically if you always look for all elements LEFT of “#shadow-root” and replace it with ::shadow, selector should work. Also of course /deep/ but yeah… I’ve been doing shadow for a while now with Polymer, but selectors are particularly a little more involved in Atom with all of the nesting etc.

Thought I’d share!


#7

I’m quite confused. By “chrome inspector underneath inspect” do you mean the elements tab? What do you mean by “look for”? And what is the “it” you are replacing? I just tried and I can’t edit the selector path at the bottom of the elements tab…


#8

I meant “select for”

I just meant the breadcrumb like path finder feature is more useful with the shadow dom. It generates the selector for you as you probably know.

You can replace #shadow-root with ::shadow basically.