Longtime user of bootstrap & tailwindcss for pet projects. I've looked at the 'What Problem Does This Solve', but I'm not sure where Shoelace could fit into my workflow.

Bootstrap is great for when I just want to quickly prototype and build a decent looking interface, but it feels confined when I start wanting to style things myself. When designing MPAs I typically use Bootstrap.

Tailwindcss is great for styling anything and everything, but I find sometimes I waste too much time styling little things that other CSS frameworks already have nice defaults for (and I am a terrible designer so this compounds my dificulties). I often use tailwind for SPAs.

Forgive me if my question is a little naive, but where could I fit Shoelace in for pet projects? Do you see it as being a suitable replacement for one of these usecases? Complementing them? Does it lie somewhere in the middle?

Shoelace is more akin to Bootstrap. You can use it for quickly tinkering, prototyping, or as a foundation for your own design system.

One thing Shoelace doesn't provide right now is a set of base styles. I've considered offering these as an opt-in CSS class or a <sl-prose> component, but I'm not sure it belongs tightly coupled with the library.

On one hand, it makes sense to provide a single "theme" that styles both components AND the underlying website/app. On the other hand, this will make themes very opinionated and potentially overbearing. I still need to think about this more.

In the meantime, you can use something like Tailwind's typography plugin [1] to handle base styles and use Shoelace in lieu of Bootstrap. IMO Shoelace + Tailwind is a great combination for those who prefer utility classes.

1. https://github.com/tailwindcss/typography

What would be the convention for using tailwind to style components in general?

You can use Tailwind classes on all your markup as you normally would. In terms of Shoelace components, they're more limited to layout, spacing, flexbox, grid, etc. for arranging and positioning (e.g. don't expect class="btn btn-blue" to turn a Shoelace button into a Tailwind button — although you can use them alongside each other if you want).

To style the internals of a Shoelace component, you can target it in a stylesheet using CSS custom properties or CSS parts as described in the docs. [1]

1. https://shoelace.style/getting-started/customizing

Sounds great! I'll have try it out in my next pet project.

I think Shoelace would be roughly equivalent to if Bootstrap offered web-component versions of their components, so instead of

    <button class="btn btn-outline-secondary">...</button>

would be like:

    <bs-button outline color="secondary">...</bs-button>

While this doesn't sound all that useful, I think this would be very handy for the interactive components like popovers, tooltips, carousels that need a lot of tag soup and javascript:

    <bs-popover>
      Hello World
    </bs-popover>

The "in" animation on components like dialog or drawer doesn't seems to work on Firefox (78.0.2 on Windows). Very abrupt in, smooth fade/slide out.

Also there are small version of buttons but none for other form controls which is quite odd.

Seems nice and lightweight overall. I would love to see a dark version too.

This was addressed for the drawer here: https://github.com/shoelace-style/shoelace/issues/103

I can't seem to reproduce this for other components, but I'll check again.

> Also there are small version of buttons but none for other form controls which is quite odd.

Button, input, textarea, and select all have size variations. It's missing from checkboxes, radios, and switches but I'm not sure how useful that is. Feel free to submit an issue so folks can vote on it.

Edit: this has been identified and fixed in dialogs!

I had a look through the docs, and this looks really nice - a great collection of components, and well documented too!

I'm new to web components though, so I was surprised when I saw in the docs that you need to use the CSS `::part` selector to style components, rather than simply using more "traditional", well-known CSS. Is this a result of using a shadow DOM? If so, what benefits does using a shadow DOM use for these components?

Thanks!

This is an intended side effect of using a shadow DOM. I tried to outline the advantages in the Customizing section of the docs [1] and I think these three points will answer your question.

- Customizations can be made to components with explicit selectors, such as ::part(icon), rather than implicit selectors, such as .button > div > span + .icon, that are much more fragile.

- The internal structure of a component will likely change as it evolves. By exposing component parts through an API, the internals can be reworked without fear of breaking customizations as long as its parts remain intact.

- It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.

1. https://shoelace.style/getting-started/customizing?id=compon...

Understood - I'm more of an old-skool CSS kind of person, but this explanation makes good sense.

I had another look at the docs, but I still don't see anything about the benefits of shadow DOM for this library (unless the benefit is the "part thing"?)

The shadow DOM encapsulates styles and behaviors in the component. Nothing leaks in, nothing leaks out.

The concept can get confusing, especially once we start talking about how styles reflect on slotted content (i.e. elements in the "light DOM") vs. shadow DOM elements, but that's probably more relevant to component developers rather than consumers.

Is it inspired by element ui [0] in any way ? The look and feel is very similar.

[0] https://element.eleme.io/#/en-US/component/installation

Yes! I love Element. I mentioned it here in the attribution section. https://shoelace.style/?id=attribution

Great. Your link to element ui on the attribution page is broken btw. Looks like it is adding the base url of shoelace to the element ui url. So the link is showing as "shoelace.style/element.eleme.io"

Good catch. I'll get that fixed!

As someone new to web components, I'd love to see an example app/site made with this - something really simple, with no frontend framework, just showing how you use them.

I'm not sure what is your definition of vanilla, but I suppose the output of stencil.js comes with a VDOM runtime.

Of course, there are underlying utilities that enhance the components. The resulting components are standard web components.

From Stencil's website [1]:

> Stencil is a compiler that generates Web Components (more specifically, Custom Elements) and builds high performance web apps. Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

> Stencil takes features such as Virtual DOM, async rendering (inspired by React Fiber), reactive data-binding, TypeScript, JSX, and Static Site Generation (SSG) and then generates standards-based Web Components and web apps with these features baked in.

1. https://stenciljs.com/docs/introduction

Digging this! Nice work.