Adding class to element inside shadow root

Question

I'm simply trying to add a class to an element inside a shadow root. Im using coffeescript to do this inside atom... Here is the problem snippet taken from within my class.

createChatTab: (chatTitle = defaultChatTitle) ->
  chatTab = document.createElement('gh-chat-tab')
  chatTab.id = "thisWillBeAUniqueID"
  chatTab.innerText = chatTitle

# Add click event
chatTab.addEventListener 'click', =>
  @.className = "open"

# Add to shadowDom
@theBar.appendChild(chatTab)

# Clear the chat tab
chatTab = null

I've created the element, added a click event to it, which I'm then appending to my shadow root element and then clearing the original variable.

In run time the element appears fine within the shadow root, and a console log shows that the click event did run, however the 'open' class is not added?

Solved: Managed to wrangle this one myself: Answered below.

Answer 1

Managed to solve this by changing fat area to thin arrow!

# Add click event
  chatTab.addEventListener 'click', ->
  @.className = 'open'