Questions tagged [web-component]

Web components are reusable client-side elements made using native code or third party libraries.

Filter by
Sorted by
Tagged with
0 votes
0 answers
38 views

Invalid Hook Call into reusable react component

I try to build some reusable react component. I start with a simple component : a button like import React, { useState } from 'react'; const ButtonLike = () => { const [counter, setCounter] = ...
stephane bareau's user avatar
-4 votes
0 answers
25 views

Is it a good idea to use freely available libraries (GitHup MIT/BSD) in long-lasting web applications? [closed]

There are tons of libraries available for all kinds of problems. MIT and BSD license make it possible to use them also in close source projects. To not reinvent the wheel, normally you would say, yes. ...
be_mi's user avatar
  • 533
1 vote
1 answer
96 views

Is it possible to create a type definition for dynamically generated class methods in typescript?

Is there a way to create a type definition for class method names that are dynamically generated and follow a naming format like {name}Ref? Basically, I'm wondering if something like this is possible: ...
Hawk Ticehurst's user avatar
0 votes
1 answer
27 views

Is there a way to make a Stencil.js web component automatically insert itself into the DOM without user interaction?

I have a small stencil.js component, which I have published to npm, and created a CDN link for it. The way it normally works is you copy the script with the cdn link, and then you insert the component ...
happy_story's user avatar
  • 1,031
0 votes
0 answers
24 views

How to make a web component redraw when its DOM is modified?

I have this repository for rendering radial pie charts in HTML documents. It works fine, yet it does not update when I modify the DOM which "marks" the chart. The code that fails: <script&...
coderodde's user avatar
  • 1,315
0 votes
2 answers
37 views

Shadow DOM Style Isolation

There seems to be an oddity in isolating Shadow DOM styles from the Main DOM styles, see the below. In essence if I am specific about the tagName then there is isolation, but if I use * as the CSS ...
user3094755's user avatar
  • 1,559
0 votes
2 answers
51 views

Lit not rendering slotted children

I'd like to create a custom element to render a select input. One parent creates <select> then a slot generates the <option> based on an array of choices. import {html, css, LitElement} ...
JohnCoene's user avatar
  • 2,124
0 votes
1 answer
21 views

How to target an element inside a shadow DOM from another web component wrapped inside it

Well, I'm not sure I've been clear by the question title... sorry. I would like to show a wc-tooltip I'm already using without problems on the DOM: <div> You can use <span class="disk-...
vitto's user avatar
  • 19.1k
1 vote
0 answers
32 views

How do I properly handle removal of a Blazor rendered element by Javascript?

I know changing DOM by Javacript within a framework like Blazor is a bad idea but right now I cannot see any workaround. I have a list of custom components (Material Web <MdInputChip>) rendered ...
Luke Vo's user avatar
  • 18k
1 vote
0 answers
113 views

How to Improve Developer Experience When Integrating Blazor Components Custom Elements into ASP.NET MVC app

I'm currently working on a legacy ASP.NET MVC application, and my goal is to integrate Blazor components that are compiled to custom elements within this ASP.NET MVC app. I came across this article: ...
snowfrogdev's user avatar
  • 6,033
0 votes
1 answer
36 views

Import StencilJs generated web-component in Astro

I have build a web-component with StencilJs and published it to NPM and would like to use it in an Astro project. However the web-component does not load. package.json: "obfuscate-link-web-...
ivoba's user avatar
  • 5,792
1 vote
1 answer
71 views

Is it possible to embed tailwind classes in a Svelte custom component isolated inside the Shadow DOM?

I am building a custom component (web component) in Svelte and Tailwind. My goal is to make this component have self-contained styling, but I have trouble with including the Tailwind stylesheet inside ...
Martin's user avatar
  • 33
0 votes
0 answers
8 views

Accessing Global Window Object from MVC Razor and React Web Component

We have a website which is a mix of .NET Razor pages and React Web Components. There are a lot of user-input fields which require validation (e.g., only ASCII characters are allowed) and to handle ...
Dominick's user avatar
  • 324
0 votes
0 answers
17 views

How does StencilJS lazy loading work in detail?

StencilJS provides a very concise and useful API for creating Custom Elements. That's why a project of mine is using a monorepo containing multiple separately versioned StencilJS projects. Now, a ...
MysterieDev's user avatar
0 votes
1 answer
15 views

Importing stenciljs components from one project to another

I am baffled that I have not found an official answer anywhere, but is there a way to use defineCustomComponents from a stenciljs component project in another stenciljs component project? Or is it ...
Andy95's user avatar
  • 220
0 votes
0 answers
25 views

Lit JS - Issue with event.target in document.addEventListener

If i am using document listener anywhere in Lit Js and try to console event.target then it is printing only current element object instead of element which user has clicked. connectedCallback() { ...
Vinay Dhakre's user avatar
1 vote
0 answers
65 views

Critical dependency: the request of a dependency is an expression. NextJS

Mutation Observer with Webpack and Next.js - Bundle Loading Issue I'm working on a project where I'm using a library in conjunction with Webpack to create web components. To dynamically load these ...
Basit Qayoom's user avatar
0 votes
1 answer
37 views

how to use lit components using mutation observer so that we can use lit components in nextJs and lazy loading should work. Provide me workable code

how to use lit components using mutation observer so that we can use those components in next js project and lazy loading is also possible. Provide me the complete workable code I want to run web ...
Aditya Khandelwal's user avatar
0 votes
2 answers
77 views

Adding Custom Component to Docusaurus

I have a quite large angular component exported as custom component, which I want to load as a demo into my docusaurus documentations It consists of several bundles and other resources all saved in ...
DeusProx's user avatar
  • 188
0 votes
0 answers
20 views

Export react component to an Existing Projects/Another web applications

I need advice on what approach to use for Export react component to an Existing Projects. I have react component/app, for instance: function App() { return ( <div className="App">...
necik11's user avatar
  • 41
1 vote
1 answer
58 views

Why does CSS variables defined like `:where(:root, :host) { --my-var: value }` inside Shadow DOM not work?

I've noticed that some of the CSS variables I've defined within a web component (using Shadow DOM) aren't functioning as expected. It appears that using :where(:root, :host) is causing the issue. When ...
morishin's user avatar
0 votes
1 answer
39 views

Angular Web components -> *ngIf directive Error

I am new to webComponents. I am facing an issue, please would you help me? Let me tell you what i have done till now : I created an Angular shell like project with command - ng new MyAngularAppHolder -...
Manoj HT's user avatar
0 votes
2 answers
54 views

How can access the specific html tag inside of slot in light DOM through the shadow DOM?

I've created a custom element and defined it in html as follows: ` <header> <custom-navbar links="[{title:'home'},{title:'About'}]" class="bg-purple"> <...
amir tbi's user avatar
  • 338
0 votes
2 answers
47 views

Any way to init an astro component by string?

I am fetching some data from my CMS and got stuck trying to initialize a component i get as a string. These are my components as a string array: [ '<Header text="title1" img="link/...
stepframe's user avatar
1 vote
1 answer
48 views

Retrieve react context within a <custom-web-component />?

I have a defined <custom-web-component /> that might appear anywhere in a DOM at runtime in a react-based application. The <custom-web-component />'s connectedCallback() tells a <...
Jason Kleban's user avatar
  • 20.1k
0 votes
1 answer
93 views

Data binding from slots?

I've been working with Lit and recently I got into a weird issue where I couldn't get the property change detection in updated lifecycle callback when the property value (in this case: myProperty) is ...
Hitesh Misro's user avatar
  • 3,361
1 vote
2 answers
48 views

Web Component #shadow-root css leaks to document

My understanding of web components was that you can use it to prevent css leaks from the web component to the parent. I need exactly that but for some reason styling inside the web component affects ...
rdehuyss's user avatar
  • 764
0 votes
0 answers
14 views

ng 16 app failes with "Error: `.mjs` files *must* set `isModule` to `true`.", Has anyone gone through this error?

I'm trying to load my angular 16 app as webcomponent into my host app with module federation. Specified all of envirinment setting in below section. With all those, when I launch app with "ng ...
Riyaz's user avatar
  • 1
0 votes
0 answers
52 views

How can add custom theme of vuetify library inside of a web component?

I've created a web component by Vue 3, and also vuetify 3 has been used. The link contains the codes of project : vue-web-component When I run the command npm run build, the web component is built and ...
amir tbi's user avatar
  • 338
0 votes
1 answer
64 views

How can Add libraries like Vuetify inside of a web component created by Vue 3?

I am looking for to add some libraries like Vuetify or use other Javascript libraries inside of a web component created by Vue3 in vue-web-component
amir tbi's user avatar
  • 338
1 vote
0 answers
63 views

Wrapping a react webapp in a web component

I have a react webapp I would like to put into a web component. The webapp relies on a css and a sass file loaded by import statement. Of course moving the webapp into the web component causes styles ...
Francesco's user avatar
  • 1,752
0 votes
1 answer
79 views

Can't pass object prop to vue 3 web component

I am trying to pass an object prop to a vue3 web component. My web component: <script lang="ts"> import { type Ref, ref, type PropType } from "vue"; export default { props:...
Or Bezalel's user avatar
0 votes
2 answers
51 views

Is is possible to use ag-grid-community with LitElements?

Is is possible to use ag-grid-community with LitElements? This is what I have tried, I am unable to initialize the ag-grid instance with the below code, Console Error - ag-grid-community.auto.esm.js:...
user22387796's user avatar
0 votes
0 answers
28 views

Data Transfer Failure between Angular and Vue2 through Web Component

Due to necessary reasons, I must introduce a web component created by Vue2 within Angular. We've gone through quite a lot of difficulties, and the current problem is that I can't pass data to Vue's ...
Pork Jackson's user avatar
0 votes
0 answers
58 views

How do I add web components to typescript JSX type for preact on Deno?

How do I add web components to typescript JSX type for preact on Deno? /// <reference lib="dom" /> /** @jsx h */ import { PreactDOMAttributes, h } from 'https://esm.sh/[email protected]'...
ThomasReggi's user avatar
  • 55.4k
0 votes
0 answers
27 views

Is there a way to assign a title to a Constructed Stylesheet so that the given title appears next to rules from it in the Chrome Inspector?

I've been using Constructable Stylesheets for web components. Thus far I've been frontloading them all into a singleton and mass sharing them across the Document and every component's ShadowRoot. This ...
Will Nations's user avatar
0 votes
0 answers
24 views

CSS: Styling a pseudo element of a part of a web component

I have a custom web component, a dialog (very simplified version below), which has a part, the part has the pseudo element. Bascially within the custom webcomponent is a <dialog part="dialog&...
run_the_race's user avatar
  • 1,434
0 votes
0 answers
45 views

Why process is not defined in web component?

I've used Vue3 for building web component, and my Vue app is accessible through the following link: vue-app After running the npm run build, I've used the built files in a simple index.html. and wirte ...
amir tbi's user avatar
  • 338
0 votes
2 answers
79 views

How do I access global css variable in webcomponent

I am using vanilla webcomponents and bundle with webpack. In my components css I import the global css sheet with the @import declaration e.g @import "../../style.css"; In style.css I have ...
noontz's user avatar
  • 1,794
0 votes
0 answers
51 views

Is it possible to use Google's "Material Web" component library in Stencil to generate React component wrappers from it?

I recently embarked on a React project that involves the integration of Web Components. These Web Components are sourced from two distinct origins: the "Material Web" component library ...
Clemgotlost's user avatar
0 votes
1 answer
119 views

how to make conditional content projection in Angular?

I want to make an optional content projection in Angular. The whole thing should look like this, for example: <app-root> <app-header></app-header> </app-root> A default ...
Martin's user avatar
  • 316
0 votes
3 answers
106 views

How to add stylesheet to shadow dom?

I am using web components. I have the following html structure <div class="test"> #shadow-root (open) <overlay-trigger type="modal"> <div id = "...
Rue Vitale's user avatar
  • 1,557
0 votes
0 answers
29 views

Is it possibile to export an entire Angular application as web component?

This is a theoric question. I know I can export an Angular component as a web component with Angular Element. My question is: can I export and existing entire Angular Application as a web component ...
Matt's user avatar
  • 295
0 votes
0 answers
12 views

Webcomponent vue not showing

There is an app that needs to be packaged in a web-component. Using the command: vue-cli-service build --target wc --name my-component 'src/components/*.vue' --inline-vue I'm trying to connect on a ...
Alex's user avatar
  • 371
0 votes
0 answers
52 views

Stencil starter errors

i wanted to try stencil.js. I followed the "Get Started" from their docs, but there are some errors and i can´t find a solution. What i did npm init stencil cd projekt && npm install ...
RBN2208's user avatar
  • 17
0 votes
1 answer
46 views

Custom event with 'composed: false' still catchable outside shadow DOM in StencilJS component

Can somebody explain me this behaviour? So, in Stencil js, i have custom event that i am emitting using @Event decorator which has {composed: false}. Why am i able to catch it outside of shadow DOM ...
saksonia's user avatar
0 votes
0 answers
225 views

How to integrate Stencil Web Components in NextJS (implementing SSR not CSR)

I have created Stencil web components which are published on NPM. Now I have installed that package in NextJS. I have done Client Side Serving of those stencilJS components in Next JS shown below: ...
BQC's user avatar
  • 23
1 vote
1 answer
120 views

Component Constructors In HappyX

It possible to create custom component constructor in happyx web framework? For example: component A: field: int constructor(args): ...
Emilia Qtless's user avatar
0 votes
0 answers
68 views

SwiperJS web component + Vue 3 ignores observer param + event

I am importing SwiperJS WebComponent just fine in one of my Vue 3 SFC components. It correctly shows some slides with clickable pagination and looping. Currently instantiated like this: <swiper-...
andcl's user avatar
  • 3,372
0 votes
0 answers
110 views

Swiper js - React (WebComponent) nested swipers with virtual slides not working

Im trying to use swiper.js with react (webComponent) with nested swipers and virtual slides, but can't get this to work :/ You can check the attached codesandbox, if you comment virtual={true} on both ...
spacedev's user avatar

1
2 3 4 5
74