Questions tagged [web-component]
Web components are reusable client-side elements made using native code or third party libraries.
3,241
questions
0
votes
1
answer
19
views
Is it semantically correct to have multiple (inner) elements with the same ID in one HTML page under different shadow roots?
I'm using Stencil to build web components and recently had a little talk with a colleague about shadowRoot and implications. Suppose I have the following simple component with a a tag which has the id ...
0
votes
1
answer
11
views
Slotted elements not added to Custom Web Component in iOS
I'm developing a custom web component and when I add options inside via tag, those are not rendered for iOS browsers.
const template = document.createElement('template');
template.innerHTML = `
...
0
votes
0
answers
11
views
Stenciljs web component library compatibility with Flutter
I have a stenciljs custom web component library and I would like to know if it is possible to integrate it in a flutter app.
1
vote
1
answer
15
views
How to style dynamically in lit?
Good time
How to style dynamically in lit?
My main goal is to change the color of an element according to the user's input in the input element.
My code screen shoot
0
votes
1
answer
14
views
How can one log into Auth0 for integration testing?
I'm using @web/test-runner to perform e2e testing of a web application that uses Auth0. This has been a problem because Auth0 doesn't allow for wildcard path addition for redirects and @web/test-...
0
votes
1
answer
32
views
How do you use element attributes with Svelte when compiling to a custom element?
I am trying to create a custom checkbox using Svelte and compile it to a custom element (with customElement: true) but I don't know what way is the proper way of using attributes.
Looking at the ...
0
votes
0
answers
24
views
What is the "right" way to nest components?
This seems like a very basic questions, but neither the documentation nor code examples I found were able to tell me.
Given the following example:
import { FlowIdentification } from "./flow-...
0
votes
0
answers
16
views
LWC Pagination with page number
I'm a junior developer, I need some help to implement an lwc component which display records in experience site so I need to implement pagination since we have a large number to record.
I implement ...
0
votes
0
answers
24
views
vue2: Uncaught TypeError: Cannot read properties of undefined (reading '_init')
[I have similar problem like this one but I didn't get to solve it.]
I'm using vue@2.6.11 and vue-custom-element to build custom web component.
Everything works fine when I build locally. However, I ...
0
votes
0
answers
24
views
Rich-text editor in Vue app does not work when loaded as web-component
We have a Vue application built as a web-component and loaded on another HTML page (as a web-component).
We have tried different rich-text editor implementations (TinyMce, Quill Editor, CkEditor, vue2 ...
1
vote
1
answer
52
views
How to prevent CSS from being auto-appended to bottom of the head element
A group of volunteers has created a single/multi-select web component using StencilJS: https://github.com/NothingAG/adg-components
For this web component, Shadow DOM is not enabled so that developers ...
0
votes
1
answer
22
views
StencilJS: How to compile a component production-ready (so it's simple to be used in projects)
A group of volunteers has created a single/multi-select component using StencilJS: https://github.com/NothingAG/adg-components
Now we want to hand it over to the client so they can use it in their ...
0
votes
0
answers
46
views
Update html element from Javascript in Web Component
I am developing a PWA app using web components and vaadin router, this is my flow
index.html (main entry to PWA app)
index.html has reference to local ./js/index.js and routes
index.js has references ...
0
votes
0
answers
23
views
Importing font awesome CSS into web component (FASTElement)
I am trying to include the Font Awesome CSS into a FASTElement, like this:
import { css } from '@microsoft/fast-element';
import { Theme } from '../../theme';
import * as style from '../../assets/...
0
votes
0
answers
22
views
Electron & Lit rollup build
Im trying to create a electron app using Lit based on the Open Wc recommendations (https://open-wc.org/guides. I build the app using rollup and the build runs flawless on the es-dev-server but when I ...
1
vote
1
answer
55
views
Can I detect if a specific CSS custom variable exists in the loaded styles?
I am creating some custom web components. One of the components is a light/dark theme switcher. However, this relies on a specific stylesheet being loaded.
I would like to output a warning if the ...
0
votes
2
answers
47
views
Vue web component prop not being set through html attribute
I've got a vue web component with a numeric prop on it, and through some testing have found that doing something like this doesn't work in setting the prop value...
<script src="https://unpkg....
0
votes
1
answer
52
views
Active nav item with custom html elements
I'm building a nav component using html custom elements like so:
HTML
<app-navbar></app-navbar>
<template>
<style>
ul {
display: flex;
list-style: none;
...
0
votes
1
answer
24
views
Import less style inside web component with webpack
I need to import styles from a less file inside a web component. I'm using webpack with less-loader. When I try to import the style from the less file, I get an error regarding variables used in the ...
2
votes
2
answers
43
views
Custom Element (HTMLElement) allowed as child of list (<ul> and <ol>)?
I figure this is not allowed:
<ul>
<my-li>
#shadow-root
<li>
<span>hello!</span>
</li>
</my-li>
</ul>
But what can we do to not ...
0
votes
1
answer
35
views
How to include Paypal Messages in web components?
Hi Stackoverflow community,
I need help in loading Paypal messages in web components.
After loading the paypal SDK, I am trying to include the Paypal pay later messages with the code below.
...
0
votes
0
answers
21
views
@open-wc/testing - TypeError: Cannot set properties of undefined (setting 'hidden')
I am running a unit test on a web component that has been built with lit. The test is failing when hitting the firstUpdated() function. The issue looks to be related to this.tooltip.hidden and ...
0
votes
0
answers
23
views
Angular WebComponent
My question is about WebComponent Angular Standalone. I created one like this:
app.module.ts
constructor(injector: Injector) {
const comp = createCustomElement(AppComponent, { injector })...
0
votes
0
answers
28
views
How to use static files with Custom Web Component
I have created a web component, uploaded it to npm, and imported it into another project.
I use webpack to bundle all of the code used within the web component, which creates a bundle file (in my case ...
0
votes
0
answers
26
views
Difference between Angular Module Federation and Angular Elements
Can anyone explain to me the difference between Angular Module Federation and Angular Elements? I am new to Angular and my understanding so far is that both are two ways to provide shared Web ...
0
votes
1
answer
62
views
What web component features are not supported by Safari desktop and Safari iOS?
Most references as below mention that Safari partially supports web components.
In detail, what web component features are not supported by Safari desktop and Safari iOS?
Is there a technical docs or ...
1
vote
0
answers
24
views
Reset Angular router state in webcomponent (angular elements)
I have a simple microfrontend scenario that loads and embeds an angular 13 webcomponent (created with angular elements) in a container webapp.
Basically, the routing works fine. When leaving the route,...
0
votes
0
answers
13
views
React Link isn't serving up new page although the url is now updated [duplicate]
I'm trying to get to work on my site but for some reason, it would only update the URL but not the page. I've looked at other similar questions on this issue, but none of them really helped me get ...
0
votes
1
answer
31
views
Javascript Web-Components - add subitems
class Table extends HTMLElement {
// attributes
constructor() {
super();
this.name = 'undefined';
this.icon = 'bi-patch-question';
}
// component attributes
static get ...
0
votes
1
answer
28
views
Javascript Web-Components - Add function to the shadow-DOM
I'm working on new web-components for my site, which work fine just with html/css. However, I was not able to add some kind of javascript functionality to my shadow DOM.
In my case, it's about a ...
1
vote
1
answer
24
views
Exporting multiple parts with CSS exportparts
I have a web component that is nested inside of other web components and I am working on a theming solution for my components. I need a way to export multiple parts but what I am trying to do does not ...
-1
votes
0
answers
36
views
Lit web composent, no show map OpenLayers, I don't now wy
I don't know why my map is not displayed. I tried different things. maybe a css problem. Or my creation method is not good. Because the card is not created
// my-elements.js :
enter code here import {...
0
votes
0
answers
10
views
ng-attr interpolation not working when loading web components with esm-es5/loader.js
I'm using angular 1.5.9 and a component library made with web components.
When loading the library using unpkg, everything works fine:
<script src="https://unpkg.com/@postnord/pn-marketweb-...
1
vote
1
answer
51
views
Vue3 Web Component V-model
i would to create a web component with vue3 for manage inputs and forms.
But i have problem with two data binding.
I define the web component in my html page.
<vue-input-text id="...
0
votes
0
answers
60
views
LitElement in Angular 8 - error TS1005: ';' expected. TS1128: Declaration or statement expected
i am trying to use a litElement Webcomponent inside an Angular 8 Webapplication. I think i followed all instructions correctly to integrate a webcomponent inside an Angular project as everything is ...
1
vote
1
answer
26
views
How to pass images has props in a vue js component (Configured with vite cause require doesnt work in vite)
Here is my parent component
<template>
<rooms-card
roomImage="../../assets/images/room3.jpg"
roomType="Duplex Room"
roomDescription="Sami double bed 1 guest room 3 ...
2
votes
0
answers
29
views
Web scraping site using polymerjs / webcomponent
I'm using colly to web scrape youtube charts. This site use polymerjs and as a result, I'm having issues to capture the DOM elements. A simple test I did was document.querySelector("#search-...
1
vote
1
answer
42
views
Styles not preserved when moving Lit element to new document
The Problem
So I have a Lit element I am trying to move to a new document. I can get it to move and all of the functionality is still in place, as well as the communicated between it and the original ...
0
votes
0
answers
58
views
Storybook web component code examples extra comment tags
We are trying to create a design guideline with lit and want to use storybook to document our components. Here is a example story (in mdx format) that I use:
import { html } from 'lit';
import { ...
0
votes
1
answer
31
views
Class placed on web component does not persist when toggled with mwc-tab-bar
Using lit element 2,
I notice when I toggle in the tabs with mwc-tab-bar, the class="hide" on <transactions-element class="hide"></transactions-element> does persist.
...
0
votes
1
answer
52
views
How do I set properties according to custom HTML attributes in CSS?
I'm working on Fractions.
My checkpoint is :
frac {
display: inline-block;
position: relative;
vertical-align: middle;
letter-...
0
votes
0
answers
32
views
Web Components (API)
I have recently started using the custom web components and shadow Dom recently and I have successfully implemented my custom web component, I am actually making a scorecard of live cricket matches, ...
0
votes
0
answers
38
views
How do I update the value inside of a custom component in Wix?
I have a custom element that I'm using to get color input values in Wix. Currently, I have trouble getting a value from outside of the custom element to show in the custom element. For example, I want ...
0
votes
2
answers
50
views
How to use native slots in react?
I'm trying to build a simple application with react and web components UI library.
This library uses named slots in order to populate areas in the component.
When trying to use a named slot like this ...
0
votes
2
answers
33
views
How do I implement Coloris npm package as a custom element?
I have been trying to implement an NPM called Coloris, to provide end-user color customization capability to a Wix website through a web component. From what I can see, the javascript isn't working/...
0
votes
1
answer
19
views
FAST Element's Repeat Directive - Indexing
Hello FAST team/community members!
I am currently building out a project using FAST Element, web components, and Fluent-UI. I am trying to render something based on where two items are in an array.
I ...
0
votes
0
answers
26
views
How to integrate app-Level packages into Vue 3 Webcomponents?
Kontext
Vue 3 provides a way to create "Custom-Elements": https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue
The idea as far as I understand it, is to ...
0
votes
2
answers
38
views
Web Components in Vanilla JS: Equivalent of ngFor and v-for?
I have a custom component defined in vanilla JS:
class Article extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.render();
}
render() {
this.innerHTML ...
0
votes
1
answer
40
views
Toggle a partial show/hide list in a web components with vanilla JS
I'm currently learning about web components. With that, I've been working on a toggle to show/hide some elements of a list. I have a countries.json file where I have the data of several countries. An ...
1
vote
1
answer
65
views
`Uncaught TypeError: Illegal constructor.` when extending HTMLSpanElement
I am getting an Uncaught TypeError: Illegal constructor. for a basically empty constructor:
export class Citation extends HTMLSpanElement {
constructor() {
super();
}
}
A comment in this ...