Alpine @click not working inside shadow root

[Lomacar]

Hi @bubnenkoff, thanks for checking out Ewok! Yes, you were running into some Alpine-specific issues. You were also not doing things in the best way. Here is a simpler example that achieves what you want in a proper Alpine way.

I did realize with this test that the template has to be noshadow because @click doesn't seem to work otherwise. Not sure why and that is something I will want to fix.

<template id="top-menu" noshadow>
    <script>
      Alpine.data('activePage', () => ({
          activePage: '',
      }))
    </script>
    <nav class="wrap" >
        <div class="tabs right-align" x-data="activePage">
            <a id="home" @click="activePage=$el.id;" :class="activePage==$el.id && 'active' ">Главная</a>
            <a id="search" @click="activePage=$el.id" :class="activePage==$el.id && 'active' ">Поиск</a>
            <a id="docs" @click="activePage=$el.id" :class="activePage==$el.id && 'active' ">Документация</a>
            <a id="price" @click="activePage=$el.id" :class="activePage==$el.id && 'active' ">Цены</a>
        </div>
    </nav>
</template>
  
<top-menu></top-menu>

Originally posted by @Lomacar in #1 (comment)