Questions tagged [web-component]
Web components are reusable client-side elements made using native code or third party libraries.
3,664
questions
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] = ...
-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. ...
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:
...
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 ...
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&...
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 ...
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} ...
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-...
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 ...
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: ...
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-...
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 ...
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 ...
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 ...
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 ...
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() {
...
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 ...
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 ...
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 ...
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">...
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 ...
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 -...
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">
<...
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/...
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 <...
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 ...
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 ...
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 ...
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 ...
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
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 ...
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:...
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:...
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 ...
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]'...
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 ...
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&...
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 ...
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 ...
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 ...
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 ...
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 = "...
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 ...
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 ...
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 ...
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 ...
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:
...
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):
...
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-...
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 ...