I am trying to understand how to make a web component with attributes. There is 2 problems I don't understand in the following code: The div with the text 'the style of class is not applied' doesn't ...

I'm building an embedded widget as a Web Component using Vite + Tailwind CSS. When the app runs standalone, Tailwind responsive breakpoints (sm, md, lg, xl) work correctly, because they react to ...

I’m trying to pass an object as an input to an Angular custom element created with @angular/elements, not via HTML attributes (since setAttribute only supports strings). Here’s a minimal example: ...

I’m experimenting with Angular Elements and trying to update an input property programmatically, not by writing it in HTML like <app-foo name="...">. Here’s a minimal example: import { ...

When I asked Google AI it responded: Why combining them is wrong The selector :host::part() attempts to mix these two concepts incorrectly: It tries to select an element with part="base". ...

I would like to properly load css and icons into my web component, right now styles are loaded but icons are not. Here is my web component: import React from "react"; import { createRoot } ...

I'm creating a web component, and I would like the user/webmaster to be able to style elements in the shadow DOM without touching the JavaScript class. In the example I have a style element as a child ...

Is there a tutorial about how to use Web Components in a Nuxt app? I am trying to include one in my app. First, I created a Vue app and figured out how to use it there and I got it working perfectly. ...

I'm creating a plain vanilla website, and many pages of my website has a component in common (a sidebar), so I created a Web Component to easily include in all pages. The class of the component: //...

I'm writing a Svelte(Kit) library that currently works by importing the svelte component. I've been requested to make it also available as a web component, i.e. something like: <script src="...

How can I change the following light DOM custom element to show the content of the default slot between (!!!) the two horizontal rulers? Please be aware, that I cannot use shadow DOM in my use case. &...

Here's a problem that I don't understand; it may be related to the shadow root (or the grid) but I must set the height (to for eg. to 0, see the commented property in the CSS) for min-height to apply ...

I have an app with vanilla custom elements, like this: class CardComponent extends HTMLElement { static get observedAttributes() { return ['header', 'text']; } constructor() { super(); ...

I have created an LWC in Salesforce and am trying to creat Jest tests for it. I have implemented a div in html file and calling the js function using the onclick event as shown below. <div class=&...

I have a website that uses webcomponents to add some extra interactivity. In this case a carousel created in Svelte <svelte:options customElement={{ tag: "carousel", shadow: "...