Use Stack Overflow for Teams at work to find answers in a private and secure environment. Get your first 10 users free. .

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
1answer
33 views

CSS Style not applied on custom component

I created a custom web component (without any framework). Then I fill it with content from a template tag. Finally, I edit the content using Javascript. This works fine. What doesn't work is editing ...
0
votes
0answers
34 views

How to pass a function / event handler to web-component from React

I am new to web Components and trying to integrate web components with React. There is a scenario where I have to pass button from react to web-component. For click event of the button, I have ...
0
votes
0answers
10 views

How can i populate a change of a property in a Component in Vaadin Flow?

I have following class for a little visible spinner: @Tag("granite-spinner") @NpmPackage(value = "@granite-elements/granite-spinner", version = "3.0.0") @JsModule("@granite-elements/granite-spinner/...
0
votes
1answer
19 views

How to get custom element member variable from inline event handler?

Because I would like to keep the custom element self-contained, I want to avoid putting a reference to the member variable on the window object. customElements.define( 'component-one', class extends ...
1
vote
1answer
32 views

How do I call a method on a future instance inside of a method decorator?

I want to implement an @listen(eventType) decorator factory. It will return a decorator you can place on a method of a web component class when you want that method to be invoked when eventType is ...
0
votes
1answer
24 views

Is there a counterpart to Angular “slots” for DOM nodes in React?

The goal is to create a W3C web component in React which supports arbitrary DOM nodes as children. The initial markup in the browser should be like this: <custom-button> some <u>...
1
vote
1answer
30 views

Get event target inside a web component

Anchor elements (<a>) are created when the user interacts with a web component. The problem is, that I cannot get the anchor element returned from the "outside" of the web component when an ...
1
vote
1answer
52 views

CustomEvent listener callback is firing twice?

I've created a custom element: const templ = document.createElement('template'); templ.innerHTML = ` <span><slot></slot></span> `; class SlideButton extends HTMLElement { ...
0
votes
0answers
19 views

Angular Elements - Dependencies to other packages (i.e. angular material components)

I am developing a web component with angular elements. Inside my main component I set the components property encapsulation to ViewEncapsulation.ShadowDom. To build i.e. themed forms, I imported other ...
1
vote
1answer
36 views

How to use a Vuejs web component as an input element in a none-vue web app?

I created a vuejs web component with VueCli3, the final compiled component looks like this: <script src="https://unpkg.com/vue"></script> <script src="./my-lib.js"></script> ...
0
votes
2answers
29 views

Adding rules to a dynamically created stylesheet inside a shadowDOM

I recently started getting into WebComponents and I must say I have found it ground breaking so far! To get a better grasp of the concept, I am trying to adopt designs from my earlier project into ...
1
vote
1answer
16 views

Why does Ionic components render the <Host> and then inside, the <TagType>, instead of just rendering the <TagType>?

Refering to the documentation for a Ionic button component I see that the component renders the <Host>, and then, inside the <TagType>. I would like to know what is the reason behind. ...
0
votes
0answers
36 views

How to make Angular “see” methods in a child service injected with useClass?

I had a bunch of Angular components that had mostly the same code, so I created a component to contain that repeated code, mostly general methods for dealing with the data from the backend and ...
1
vote
3answers
50 views

Is there a way to control CustomElementRegistry and name other than “dom-module”

We are using LitElement to build custom components (not public). Let's call it CompA and CompB. We are publishing the packages using CDN. We use it in HTML via Script tag of type module. And each ...
0
votes
1answer
31 views

Lit-element: How to work with non-esm npm packages?

I have come from a create-react-app/webpack-babel-react world. How do you guys integrate third-party non-esm npm packages when working with Lit-Element? I'm building on top of a project scafolded ...
0
votes
1answer
36 views

StencilJS | Use CSS “+ Selector ” in component

I am working on a web component library with StencilJS, and I have a problem using the CSS + Selector. I have a Breadcrumb web component, which will contain multiple breadcrumb items (web component as ...
0
votes
0answers
23 views

npm Err! code ELIFECYCLE while creating a stencilJS component with storybook

I'm trying to follow this tutorial to learn stencilJS webcomponents and Storybook (I'm really new at coding, just to mention): https://github.com/cadgerfeast/steps-stencil/blob/master/README.md So ...
0
votes
1answer
36 views

Define a web component inside another web component without polluting global namespace

Suppose I want to use a web component that use 10 web component internally, and if the component define it globally, Internals will pollute my global component namespace and I can't use their name for ...
0
votes
1answer
39 views

script only executed once

I have created a web component and used in two different places as follows. <div class="sub_container"> <label>Users in Debt</label> <input placeholder="...
0
votes
0answers
12 views

using scripts in innerHTML [duplicate]

I'm trying to load a script inside innerHTML but the script does not get executed. How can i get my script to run inside innerHTML? my code connectedCallback() { window.globalVar = this....
1
vote
2answers
54 views

Cannot use Web Components more than once

I'm new to vanilla javascript as i have experience only in reactjs. I'm trying to display a web component i have created in two places. But it displays only once. What can be the issue here? My web ...
1
vote
2answers
47 views

Custom Elements are not getting marked when hovering over them with Chrome DevTools

I have a main html file where i embedd Web Components. When debugging I noticed, that my Custom Elements are not marked, when I hover over them. Im also not able to set the size of the custom html ...
0
votes
0answers
36 views

Embedding a CSS file in a shadow dom from a Web Component

I read that it is possible now to style my elements of the shadow dom via a external css file. But when I do the following: let link = document.createElement('link'); link.href = "config.css"...
2
votes
0answers
41 views

How to create and style svelte 3 custom elements with nested components?

I'm trying to create custom-element (web component) in svelte 3. I can't find any way to style nested components from css. Svelte removes styles before injecting them to <style> inside of ...
0
votes
0answers
20 views

How can I wrap a material-ui react component to a Web Component without losing the styles?

I'm developing a wrapper to transpile React components into Web Components. What do I need to apply the styles when the components are rendered in the shadow DOM?. I am trying to wrap a material-ui ...
1
vote
1answer
28 views

Creating radio buttons in Shadow DOM

The problem arises when we are going to create a custom radio button as a web component using Shadow Dom. Normally when we are using radio buttons, we usually give the same name to the grouped radio ...
0
votes
0answers
31 views

Material Web Components vs Material Components Web

Is there any difference between Material Web Components (link) and Material Components Web (link)? Material Web Components doesn't have much of an explanation other than Built on top of the ...
0
votes
1answer
69 views

What is the best way to encapsulate React app?

I am trying to encapsulate a React application in a Web component's Shadow Root or an iFrame to build a widget for a Chatbot messenger like Intercom widget. I´m using: React 16.8.6 Typescript 3.5.3 ...
1
vote
0answers
19 views

How would one go about creating input masks in Stencil.JS web components?

I've been task with creating a styleguide for a company. We want to use web components so that components can be shared across all web platforms regardless of framework. As with many systems, there ...
0
votes
0answers
30 views

Are there webcomponent version of materialize-css

Are there any "webcomponent" version of materialize-css? Has anyone tried to build a webcomponent using materialize-css? I'm able to get the style but haven't figured out how to get the underlying ...
0
votes
0answers
18 views

Can we create react element from react build files

I have react application build files which i want to integrate to my angular application. I know how to render react application as element and use it in angular if i have the react application ...
2
votes
1answer
57 views

Lit-Element: How do I set global/reset css

What is the current best practice to set global/reset CSS if I'm using Lit-element? I have tried 1) Inline them in <style> in my document root, 2) Construction stylesheet like this answer <...
0
votes
1answer
24 views

updating slot text in Custom Element Shadow DOM with javascript

Thanks to the question here I can select the text of a slot in my custom element. I am wondering what is the proper way to update the slot text with javascript? Can this work? this.shadowRoot....
1
vote
1answer
82 views

Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten in custom element

I created a small app using angular custom elements feature (element.js), imported that element.js file into another angular(parent) app in index.html, in development server (ng serve) element feature ...
2
votes
1answer
41 views

How to find the parent element width using javascript when we are using slot

I have one custom element having one div that contains slot. In that slot, I have JS script where i want to get width of slot's parent div. I know words are every much confusing :). here is the ...
0
votes
1answer
41 views

What is the right way to not use reserved public name withing web-component

When I run a build with stencil, I get [Warn] The @Prop() name "title" is a reserved public name. Please rename the "title" prop so it does not conflict with an existing standardized prototype ...
3
votes
3answers
79 views

How to pass object(or Associative Array) as value of attribute to my web-component

I am making vanilla-js web-component and need to pass object to attribute as its value, but every time it takes it as string. I am able to pass string to attributes of my components, but know I need ...
0
votes
0answers
25 views

Precompile React to html string WITHOUT passing the props

Problem I'm trying to come up with a way to convert a built-in react component to it's initial HTML string without passing the props. The props will be passed later in the run-time and embedded to ...
0
votes
2answers
22 views

Image grid layout with web component images

My goal is to achieve this layout for an array of Images: As you can see, a simple 2 column grid of square images - this is quite easy in a Bootstrap environment where one specifies 2 cols or size 6 ...
0
votes
0answers
21 views

AngularJS & WebComponents & IE-Firefox & Uglify - WebComponents ruins the App

We have an AngularJS App, where we should integrate an internal WebComponent. This works perfectly fine for an Angular V4+ Apps, but not on all browsers for our AngularJS Frontend Apps. While ...
1
vote
1answer
38 views

How to extend HTML elements with Angular 7

I try to create custom button in Angular 7. This button should support all attributes, which already have standard HTML button, like autofocus, disabled and etc. So I try to extend HTMLButtonElement ...
0
votes
1answer
29 views

Build an Angular Component library that uses angular-elements?

Our organization is building a component library where we add our components that are used on all our sites. For example we have a header and footer that we include on all our microsites. However, not ...
1
vote
2answers
49 views

custom element: attribute won't update component state

I'm new with Web Component and i've a problem when i write a component in html and add an attribute directly in html. The problem is that the component doesn't trigger the set property function. Only ...
0
votes
1answer
26 views

Render only when Context variable is not null REACT

I am sure I am over complicating things, but I have a application that grabs user credentials at which point it performs a web auth to retrieve a sessionID. I take this session ID and save it in my ...
0
votes
1answer
45 views

how to avoid re-definition web component in lit-element?

import { LitElement, html } from 'lit-element'; class MyPublic extends LitElement { render(){ return html` <p>A paragraph</p> `; } } customElements.define('my-public', ...
0
votes
0answers
24 views

How do I define a shadow DOM for any instance of an HTMLElement?

For example, I want all <p>s to be affected; without having to change the tag name and without adding is="". Is that possible? I tried: customElements.define('p', MyParagraph, { extends: 'p' });...
0
votes
0answers
39 views

Building and bundling webcomponents consuming common component

I started using the following repo to build several webcomponents using litelement and rollup. https://github.com/PolymerLabs/lit-element-build-rollup Initially I built 2 components where one is ...
-1
votes
4answers
78 views

How to pass value to angular element web component using button click from JavaScript?

I'm trying to update the value which is an input of Angular component by clicking on button which not a part of the Angular Element. How can I update the value in the Angular Elements in order to ...
1
vote
2answers
53 views

Web components are not loading after upgrading Angular from 7 to 8

I upgraded my angular app from version 7 to 8. I am using a custom web component in the application which is broken now. I am getting the following error in the browser dev tool: Uncaught TypeError:...
0
votes
0answers
20 views

How to access inner methods and fields of a Angular web element?

I'm developing a web element from a component developed using Angular 8. I need to access inner fields and methods of this element/component via javascript in an agnostic enviroment. How can I ...