Thankyou so much for the help and advice. Much appreciated. I shall let you know how I get on :)

Re: The light vs shadow dom hate train haha.

What are your thoughts? I’m new to WC so correct me for any misunderstanding but I try to use as much “built-in” HTML as possible & then utilise slots for layout ctrl & enhancing. I lose some of the styling ctrl but I benefit from my normal CSS.

Thanks.

I guess that removes the need for the light dom element creation. Just from a future standpoint, is what I was doing bad? (Appending an element into the light dom to be reflected into the shadow dom).

I’m looking forward to cross-root refs being addressed. Will make things feel more natural.

Thanks in advance :)

I haven't seen this in the wild and it feels unnatural to control the component from the <input> rather than the host. Unsure. I changed my approach.

Looks at the host elem, generate an id ref, create input, assoc label and input with id. Append to host light dom which is reflected into slot.

I then thought let's treat <input-stepper> the same as <form-group> (naming would need to be clearer). Takes the same slots. Extends the internals of the <form-group>.

I then get the benefit of light DOM and then it is reflected into the slots.

But...

Original thinking before the obstacles.

Have a <form-group> component with some slots (label, helper text, tooltip, input (default), validation). Get some enhancement + templating.

Have a <input-stepper> go in the default slot. Done. Keeps the <input-stepper> internals specific.

I was looking at forms & inputs. I wanted to write my HTML similar to how I have always done it. That's not possible due to cross-root referencing (glad it's being worked on).

This character count is gonna be painful haha, hopefully screenshots can fill in any blanks.

Hahaha.

It is a cool "all JS" approach. Could you elaborate on the plague?

For the styling, you are using the <style> over the adoptedStyleSheets. My understanding was from a memory perspective, if you are reusing a component X amount of times, it means less duplicate <style> in the DOM? Thanks

What “good” parts of Lit do you take? 🫣

that's exactly what i entered!

but the moment they start asking for verification, i'm out

Really loving what you’re building. Thanks for the awesome share :)

An interesting. This is kinda what I am looking to avoid. I dislike limitations, Figma has many currently. Have you explored not having Figma as the SoT? Caveats? Thanks.