Shoelace: Feature Request: Eject components to stencil project

[SheepFromHeaven]

Is your feature request related to a problem? Please describe.
As developer in a professional context, I have changes I need to make to components behaviours or layouts. I am limited by the options shoelace provides. (Example: Input working with default forms by disabling shadow-dom

Describe the solution you'd like
Similar to react-scripts eject functionality, I would love to be able to eject components in my own stencil project to have a base to work from and change the layout/behaviour.

Describe alternatives you've considered
I do not think there would be any other possibility to really do this.

Additional context
As a professional developer creating stencil libraries for companies, I feel like this feature would be killer! ❤️

[SheepFromHeaven]

BTW: I will already start working on it and would just love the discussion if this is sth you might consider valuable 😉

[claviska]

You're welcome to fork the project...that's the closest I can think of to an "eject" button. You run the same risk, of course: you won't get updates and bug fixes for free anymore.

And while I'm not opposed to people forking the project, it's clear the majority of users don't want to maintain the underlying code base and will benefit more from layering their app on top of it and limiting customizations to design tokens and CSS parts.

Example: Input working with default forms by disabling shadow-dom

Long term, once we have a cross-browser form participation API, I intend to make all form controls work with <form>. We're not there yet, so that's why <sl-form> currently exists. However, rather than rework all form controls to _not_ use shadow DOM*, it would be much easier to write an overlay that watches for form submissions and injects the data.

This approach can be generalized so you don't have to adapt each form individually. In fact, I experimented successfully with injecting hidden inputs on form submit and subsequently removing them (a trick Ionic Framework uses for some form controls). It worked but felt hacky, so that's why it didn't make it into the library.

*When shadow DOM is off, Stencil does some fallback magic to simulate the way browsers handle slots. This is known to be buggy — see #2641 and #2760 for example — and many of the issues get closed automatically without a fix. I strongly advise anyone using Stencil to use shadow DOM, otherwise you'll inevitably run into some of these slotting issues as I have in other component libraries.

[jaredcwhite]

However, rather than rework all form controls to not use shadow DOM*, it would be much easier to write an overlay that watches for form submissions and injects the data.

Is this something we could add a blurb about and maybe link to examples from the docs? For example, I wrote a gist that's a Stimulus controller which works with Turbo to do this very thing…also slightly hacky but it gets the job done.

[claviska]

Definitely. Just need to make sure it explains how it works and what situations it won't work in (e.g. third-party form serializers).

[SheepFromHeaven]

@claviska thanks for elaborating! I don't think I really presented the use case that good. I do not want the whole library to change, just individual components:

I am working on a project and have shoelace installed. Using it by styling parts, custom-properties, etc.
Now I need to change sth in one component, which it will not allow me to do out of the box. Instead of rewriting my component using the shoelace component, I would much rather say: shoelace eject button for example. This would take the source code of the button component from shoelace and put it into my stencil projects components folder. This way the other components still get updates and I can keep everything as is with just the one component being extracted from the library.

I hope this makes it more clear 🙂

[claviska]

I would much rather say: shoelace eject button for example. This would take the source code of the button component from shoelace and put it into my stencil projects components folder.

With Stencil's output targets, the types are tightly intertwined and many components are dependent on others, so I'm not sure what that would look like. It's probably something you'd have to pick apart yourself and map the custom types in your project to what's expected in Shoelace. I'm not sure it can be done in an out-of-the-box way.

By the way, I plan on moving away from Stencil — possibly in the next beta release. I've been experimenting quite a bit and managed to slim down the tooling significantly with Shoemaker and esbuild. This gives me full control over the resulting bundle and solves some black boxed issues I've been having.

[claviska]

Since Stencil is out of the picture and you can cherry pick components, I don't think this is necessary anymore. It's probably better to pull in the base stylesheet and the components you want. For customizations, you can definitely copy + paste an existing component, but I don't think that's something I want most users to do.