Working with htmx and shadow dom?

[fredt34]

I have not tested Surreal yet, I wondered if it makes selecting web components easier ? Right now I have to drill down through multiple levels of shadowroot in my new project...

[gnat]

Unfortunately I haven't tried this yet, but if anyone has, please share your experiences.

[fredt34]

Ok I'll report back here!

[fredt34]

Right now I'm using valilla js to select a 3rd-level web component with f = document.querySelector('c-datatable').shadowRoot.querySelectorAll('table tbody tr')[1].querySelectorAll('td')[3].querySelector('lightning-primitive-cell-factory').shadowRoot.querySelector('lightning-formatted-url').shadowRoot;

Unfortunately it's not possible to select directly 'lightning-formatted-url', as it's hidden under previous shadowRoots.

I can't either put some code on any sub element - I'm afraid I have to start from document.

Is there a clever way to handle this with Surreal ?

[fredt34]

While writing my previous message, I realized that I can cut this big elephant into chunks, so I came with

f1 = me("c-datatable").shadowRoot
f2 = any ('table tbody tr', f1)[1]
f3 = any ('td', f2)[3]
f4 = me ('lightning-primitive-cell-factory', f3).shadowRoot
f5 = me ('lightning-formatted-url', f4).shadowRoot
fa = me('a', f5)
me(fa).attribute('hx-target', 'global #content').attribute('hx-get', fa.getAttribute('href'))
htmx.process(f5)

which works, so I can set the htmx attrbutes I need on this <a> element - and I also can iterate on <tr>s, which I don't do at the moment.

However the gain of readability seems quite marginal compared to the vanilla way to traverse the tree. Is there an elegant way to chain elements, such as f4 and f5 (without resorting to some kind of Reverse Polish notation)?

(here I'm trying to use the super-amazing Avonni elements, further extending the amazing Salesforce components. Much, much more complete than recent component libraries... - but using them outside Salesforce environment and teaching them htmx is quite an exercise)

[fredt34]

Not an issue anymore, I ran away from this Salesforce design system and happily found and use Vaadin web components, which work well with htmx and surreal 😄 and don't mess with shadowRoot.
Problem solved! Thanks for the library!