custom-element | base class for Web Components | Web Framework library

OK so I know a few variations on this question have been asked already, across the various versions and APIs of Vue... But I haven't been able to figure it out so here's the context as to why I think mine is different:

I'm trying to build some components which:

1. Are internally complex enough that building with Vue rather than just native web components is helpful, but...
2. Will run outside Vue context on the page (not in a Vue app), so are packaged as Web Components / Custom Elements from Vue, and...
3. Implement data inputs that will be used inside s (again, not in Vue apps).

One challenge with this is that Vue Web Components use shadow DOM, and forms don't automatically traverse shadow roots to look for inputs: So making the form actually see and submit the components' inner data is not automatic.

It seems like there's some hope as detailed in this helpful blog post: A new ElementInternals API and element-internals-polyfill NPM package by which components can indicate data up to forms. Implementing a "form-associated custom element" requires setting a static readonly boolean property (easy enough) but also linking something like:

Per the Vue docs, it's possible to build components in Vue (v3) and package them as native Web Components for use with any framework or none at all.

As I've already found, the gap between design models for Vue components and Web Components can make this complex and sometimes a straight-up bad idea (at what point is it better and more maintainable to just go ahead building fully-native components?)... But let's assume for a moment that it's necessary here.

My question - What's the best way to expose a function-like interface on a Vue-built Web Component (to parent nodes)?

The Vue doc discusses passing in reactive data via props/slots, and publishing CustomEvents from the components, but I don't see mention of taking function calls (or at a stretch, events) from outside. As far as I can tell this is a pretty strong assumption that data and event flow on the rest of the app/page works in a very "Vue-like way"?

I am trying to format my css so there's no more than one empty line between lines, but i don't want that to apply to comments. The documentation for stylelint has a secondary option that should make this easy, but for some reason it isn't working. Here's the rule:

When creating Web Components with encapsulated styles using Shadow DOM, parts of the shadowed markup can be styled using the ::part pseudo selector (https://developer.mozilla.org/en-US/docs/Web/CSS/::part).

Can the part selector be used to target nested shadow parts?

In JointJS documentation (link below), I am able to define a simple custom element that is driven from other basic elements such as Line, Rectangle, Link, and so on https://resources.jointjs.com/tutorial/custom-elements

What I am trying to accomplish is to create a Group (custom element) that consists of a label at the top, and then a number of compartments aligned vertically beneath that label. A compartment itself acts as a container, which can contain a complete sub diagram, which itself can have other Groups, and so on.

I get how to create the label, but I am struggling to find out how to create the compartments as per the description above. All examples I am able to find so far are for simple custom elements that add additional attributes to the extended base elements.

I'm creating some basic elements in Stencil for a custom design system. I created some basic components, which work fine on their own as custom elements, but throw errors when used as React components.

I generated the React components via Stencil by includng the @stencil/react-output-target in stencil.config.ts.

How can we embeded leaflet Map into Preact component. I am creating a Map widget using webpack. In the below I show you the code I implemented.

I am trying to create a basic web component in Angular with Angular Elements.

So far, I have done the following:

1. Installed Elements using npm i @angular/elements --save
2. Installed npm i @webcomponents/custom-elements -- save
3. Added CUSTOM_ELEMENTS_SCHEMA to schemas array in app.module.ts
4. Created the component, call it MyComponent
5. Defined MyComponent as a custom element in AppModule using the code below

Vaadin suddenly stops to build my library with the following error. I already did the Vaadin dance (and a lot of more stuff) but I'm running out of ideas now. I try to build the library for production (but it also fails for dev).

I'm using Vaadin Flow. The issue tracker on Github redirected here for general community help - so I hope anyone has an idea how to solve this problem or what else I can try.