Figure out how we want to incorporate web components in Drupal 10

Hey gang, if ✨ Add Single Directory Components as a new experimental module Fixed becomes an experimental module for Drupal 10.1, would it be appropriate to revisit this question? I haven't spent a lot of time reading through / understanding the feature, but my read of the issue thread is making me hopeful that we might have support for ANY kind of component in core, including Web Components.

Last year, I built a fun but complex web component that would be a good test of single directory components / storybook integration and the whole stack of concerns.

pokemon-card

The challenge ahead

• Can we parameterize inputs like type of Pokemon?
• Can we support external libraries like svelte / lit without loading them once per component
• Does SDC support work for various ways a component can be implemented? Svelte / Vue / lit / vanilla (just off the top of my head)
• And how does implementing the component work for frontend devs

Moving to core. I think #9 is still accurate.

I'm personally using web components with Lit 3 and combining them with SDCs. It's been very effective!

I'm using Import Maps and this shim:

<script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js"></script>

So that my Lit components don't have to change the path to finding Lit at the top of the individual .js files.

At the top of my html.html.twig I've included these references to the Lit libraries:

<script type="importmap">
      {
        "imports": {
	        "lit": "/libraries/lit/index.js",
          "@lit/reactive-element": "/libraries/@lit/reactive-element/reactive-element.js",
          "lit-element": "/libraries/lit-element/index.js",
          "lit-element/": "/libraries/lit-element/",
          "lit-html": "/libraries/lit-html/lit-html.js",
          "lit-html/": "/libraries/lit-html/",
          "lit/directives/class-map.js": "/libraries/lit/directives/class-map.js",
          "lit/directives/choose.js": "/libraries/lit/directives/choose.js",
          "lit/directives/style-map.js": "/libraries/lit/directives/style-map.js",
          "lit/static-html.js": "/libraries/lit/static-html.js",
          "lit/directives/if-defined.js": "/libraries/lit/directives/if-defined.js"
	      }
	    }
    </script>

In each SDC's component.yml, I add this at the bottom:

libraryOverrides:
  js:
    component-name.js: { attributes: { type: module }}

There's probably better ways to do this; if anyone has suggestions. My site is still in development. But the SDC + Web Component method I'm using works well.