au-slot does not work inside shadow dom

[wzrdtales]

au-slot does not work inside shadow dom

[bigopon]

@wzrdtales I'm able to replicate it, will look into this this weekend. Thanks @wzrdtales

[bigopon]

@wzrdtales au slot can work anywhere. Maybe post a repro here first. For official doc not stating whether au slot works inside shadow dom, that can be improved. 👍

[wzrdtales]

<let isOpen="true"></let>
<let title="test"></let>
<let id="test"></let>
<div
  id.to-view="id"
  class="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center px-4 sm:px-6"
  role="dialog"
  aria-modal="true"
>
  <div
    ref="modalContent"
    class="bg-white dark:bg-slate-800 rounded shadow-lg overflow-auto max-w-lg w-full max-h-full"
  >
    <!-- Modal header -->
    <div class="px-5 py-3 border-b border-slate-200 dark:border-slate-700">
      <div class="flex justify-between items-center">
        <div class="font-semibold text-slate-800 dark:text-slate-100">
          ${ title }
        </div>
        <button
          class="text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400"
          click.trigger="isOpen = false"
        >
          <div class="sr-only">Close</div>
        </button>
      </div>
    </div>
    <au-slot name="test" expose.bind="{ isOpen }"></au-slot>
  </div>
</div>

for import (we have js code, but let should do the same as far as I got it, for easier usage using that)

<import from="../../components/modal-basic"></import>
<let instanceModalOpen="true"></let>
<modal-basic
  id="feedback-modal"
  is-open.two-way="instanceModalOpen"
  title="Send Feedback"
>
  <!-- Modal content -->
  <div au-slot="test" class="px-5 py-4">
    ${$host.isOpen}
   </div>
</modal-basic>

Results in AUR0105, although the variable exists.

<import from="../../components/modal-basic"></import>
<let instanceModalOpen="true"></let>
<modal-basic
  id="feedback-modal"
  is-open.two-way="instanceModalOpen"
  title="Send Feedback"
>
  <!-- Modal content -->
  <div au-slot="test" class="px-5 py-4">
    test
   </div>
</modal-basic>

Results in

The slot being rendered outside the shadow DOM and with that completely breaking the style and behavior.

[wzrdtales]

We rewrote the code without au-slot by now and did it quite different from what would have been possible with $host.

Maybe I should explain the expectation:

When we write a module, we expect the component to contain and maintain its state. If we use projection, we expect to be able to access the components state within the projection itself. Supposedly, that should work with au-slot, but it does not in this example. With slot it doesn't work at all. As far as we know yet though, if there is a way please let me know. If you say now: well just bind values, this is not really a good way to interact with components, b/c ultimately the projection shouldn't need to synchronize the inside state into its own variables, that makes the process cumbersome, especially if you reuse the component a lot you need tons of variables just to access certain state. And then the question is, why did we even use components.

[bigopon]

@wzrdtales can you help create a repro? You cqn base it on this https://stackblitz.com/edit/au2-conventions-tvyh8c?file=src%2Fmy-app.html

[wzrdtales]

just saw you asked once more although already provided one reproduction case, don't really have time to do that right now what you asked, also your example does not seem to use the shadow dom, even less time to try make that work

[wzrdtales]

you can look in this branch https://github.com/wzrdtales/au-repro-router-error/tree/shadowdom
https://stackblitz.com/github/wzrdtales/au-repro-router-error/tree/shadowdom

using a local project was way easier than this non identical project online. both issues are in there. once that the element is rendered not where the slot is placed and once the aur error.

[wzrdtales]

did this help @bigopon ?

[wzrdtales]

follow up @bigopon

[bigopon]

@wzrdtales I've been able to locate the issue, there'll be a fix for this I guess. It seems the detection is wrong at the moment since the code is relying on shadow dom to determine whether au-slot works.

[bigopon]

Thanks @wzrdtales this has been resolved. Beta 9 will be out with the fix for this.

[wzrdtales]

great, will retest both things of this issue as soon as beta 9 is out