Questions tagged [web-component]
Web components are reusable client-side elements made using native code or third party libraries.
web-component
3,798
questions
0
votes
1
answer
17
views
How to build a Vue web component which reflects an internal state as an attribute?
I am building a web component input which looks like this with Vue 3:
<my-input value="Search"></my-input>
How can I make sure that the value attribute is always equivalent to ...
- 19.9k
0
votes
0
answers
14
views
Tracking signal changes with effect() in web components made with Lit
I'm building an audio streaming web app, with the use of some web-components created with Lit and signals (through the library preact-signals) for global state management.
Here is how it works :
In a ...
- 269
0
votes
0
answers
11
views
Material Design Color Utilities generating unexpected colors with Material Web Components
I am working on a project where I use the Material Design Color Utilities package to create a dynamic color theme based on a primary color. However, I have noticed that the generated colors are not as ...
- 1
0
votes
2
answers
31
views
Conditional Web Component Slot Container Based on Slotted Content
Given a web component extending LitElement:
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('my-element')
export class MyElement extends ...
- 3,012
1
vote
0
answers
33
views
Mapbox-gl-draw setting the drawing color of different polygons
I want to be able to have my own custom buttons that call the «start draw polygon» function from mapbox-gl-draw. The idea is to pass what type of polygon it is (custom definition), so that I in the «...
- 11
2
votes
1
answer
26
views
Dynamically loading and rendering External files as component in angular
I have a use-case, where I should render an external angular component or web-component in an angular application.
I have created a sample application (stackblitz) to reproduce the scenario and below ...
0
votes
1
answer
39
views
Web Component not rendering when loaded from UNPKG CDN?
I'm trying to render a web component in Stackblitz using the UNPKG CDN.
This is the script element that should load it:
<script src="https://unpkg.com/fspubtest1234"></script>
...
- 45.4k
0
votes
0
answers
16
views
How to manually set focus on element in a shadow DOM (Lit Web Component)
I'm building a select/dropdown component as a Lit web component. To have consistent styling, this is NOT using a native select. I'm using divs and adding logic to have them appear when and where ...
- 1,569
0
votes
0
answers
14
views
How to bind keyboard events in Template of Lit Web Component
I have a Lit web component that contains a button with a click event. Simplified, it looks like this:
<button @click=${props.onClick}>
<!-- button content -->
</button>
The ...
- 1,569
-1
votes
3
answers
56
views
React useEffect cleanup function not undoing changes caused by React strict mode in development
This issue references to the fact that React intentionally remounts your components in development to find bugs.
I know I can turn off strict mode, but React doesn't recommend it. I'm just looking for ...
2
votes
0
answers
35
views
Angular Elements web component is throwing a zone.js error: "emitter.pipe is not a function"
I have created an Angular Elements web component to be used as a micro-frontend in an existing Vue application. The project requires the custom web component be in Angular and the main application be ...
- 1,343
0
votes
1
answer
26
views
Error Consuming a StencilJS Component Library inside NextJS
I have a StencilJS component library I'm self hosting on GitLab. It's a private repo.
I'm able to consume it within regular HTML, however I would like to use the StencilJS Web Components within a ...
- 11
1
vote
1
answer
36
views
Styling issues with angular web components
I am working on angular and have created a component that is required to be used as both an angular component by an angular application and as a custom web component to be used by another application ...
1
vote
1
answer
62
views
Can I set CUSTOM_ELEMENTS_SCHEMA globally in Angular 17 without an application module?
I have recently migrated my project to Angular 17 and as part of that upgrade I removed app.module.ts, migrating its configuration to app.config.ts. I also migrated from Material Angular to using some ...
- 25
0
votes
1
answer
43
views
Implementing attributeChangedCallback in Typescript?
In this tutorial attributeChangedCallback is implemented like this:
// attribute change
attributeChangedCallback(property, oldValue, newValue) {
if (oldValue === newValue) return;
this[ property ]...
- 45.4k