That's the premise behind Lit (using the custom elements api)! I've been using it to build out a project recently and it's quite good, simpler to reason about than the current state of React imo.

It started at google and now is part of OpenJS.

▲ sleazebreeze 19 hours ago | parent [-]

I just evaluated Lit for work and while we didn't go with it, it was very nice. I love the base custom elements API regardless of using Lit or not, turns out that's all you really need to make intricate UIs that feel seamless.

▲ g0wda 18 hours ago | parent | next [-]

Something about Lit/web components that's not written clearly on the label is the hoops you have to jump through to style elements. If you're using tailwind in the whole app, you just want to pull it into your custom elements without much boilerplate. My main app compiles a single minified app.css, it felt not so modular to now include that in every single component. The alternative is create a subclass that injects tailwind into Lit components. It'd be perfect it just had a switch to inherit everything the page already has.

▲ hunterloftis 18 hours ago | parent | next [-]

> It'd be perfect it just had a switch to inherit everything the page already has.

It does! <https://lit.dev/docs/components/shadow-dom/>

By default, Lit renders into shadow DOM. This carries benefits like encapsulation (including the style encapsulation you mention). If you prefer global styles, you can render into light DOM instead with that one-line switch.

However, shadow DOM is required for slotting (composing) components, so typically what I'd recommend for theming is leveraging the array option of each component's styles:

    static styles = [themeStyles, componentStyles]

Then you define your shared styles in `themeStyles`, which is shared across all components you wish to have the same theme.

▲ gitaarik 17 hours ago | parent | next [-]

I also made a simple lib to make it easy to implement common styles in your Lit components:

https://github.com/gitaarik/lit-style

▲ g0wda 18 hours ago | parent | prev [-]

oh nice! I didn't know that you can just make it use light dom.

  protected createRenderRoot() {
    return this;
  }

And that's what it takes! I like using tailwind/utility classes so for the styles I'd need to have layers of compiled css files rather than one giant one.

	▲	WickyNilliams 10 hours ago \| parent [-]
		The major downside of using light DOM is that elements cannot compose neatly since there's no delineating between what the component itself rendered and child content. When you need to re-render your component, how does the component know not to replace the child content you rendered, Vs the child content it rendered into the light DOM. That's why the shadow DOM and slots were necessary, because then there's no intermingling of your content Vs the component's This may not be a problem if you don't intend to compose your components. But if you do you will hit limits quickly

▲ spankalee 18 hours ago | parent | prev [-]

There's a long standing standards issue for this: https://github.com/WICG/webcomponents/issues/909

While you can easily turn rendering to shadow DOM off on a per-component basis, that removes the ability to use slots. It only really works for leaf nodes.

Pulling a stylesheet into every component is actually not bad though. Adopted stylesheets allow you to share the same stylesheet instance across all shadow roots, so it's quite fast.

▲ ianbutler 18 hours ago | parent | prev | next [-]

Interesting, I'd be curious to know why you all decided not to go with it if you're open to sharing! Minimally to know if I should look at any other promising frameworks.

▲

sleazebreeze 16 hours ago | parent [-]

I see a good case for my company to use Lit for creating complex components such as highly interactive panels/widgets to be shared between React/Angular apps in our large ecosystem. However the decision was: 1. Prefer sharing plain JS/TS over framework code so try that first and 2. if the component is so complex and tricky to get right, it probably needs to be re-implemented in each framework anyways (or some sort of wrapper)

My secondary concern with Lit is the additional complexity of using shadow and light DOM together in long lived React/Angular apps. Adding a new paradigm for 75+ contributors to consider has a high bar for acceptance.

	▲	ianbutler 15 hours ago \| parent [-]
		Ah yeah, definitely a much different equation when introducing this across many apps as a shared component library. Mixing different DOM abstractions together could get tricky for sure. And yes attempting to add a new paradigm for that many people is I am sure quite the task. More political than technical in many ways as well. Thanks for sharing!

▲ rubenvanwyk 16 hours ago | parent | prev [-]

What did you go with?