Questions tagged [web-component]
Web components are highly flexible and customizable elements crafted for client-side use. They can be assembled using either native code or external libraries, providing endless possibilities for reusability.
I've been exploring different options but still haven't nailed down the best approach. I've developed an Angular library with custom components, which I'm converting into Web Components to be used in non-Angular applications. But to make it functional, I m ...
I'm encountering an issue while developing a stencil.js web component. The error I'm facing is: (index):28 Uncaught TypeError: comp.hideDataPanel is not a function at HTMLDocument. ((index):28) My goal is to integrate my stencil component into a larg ...
My page contains dynamic HTML content that I want to incorporate. The dynamic content consists of only HTML and CSS, without any JavaScript. However, I have some custom global CSS styles and JS logic that need to be implemented along with this dynamic con ...
Recently, I've been attempting to integrate the web component polyfills into my Angular (v8) application, but unfortunately, they don't seem to be functioning properly in IE11. To showcase this issue, I have set up a new repository containing a basic Angul ...
Exploring the strategy behind determining when to create a new component in a web application using angularjs / angular has been on my mind lately. It seems like this concept could apply to all component-based front end frameworks as well. I understand th ...
An unusual problem has arisen, but I have a concise example that demonstrates the issue: https://codesandbox.io/s/falling-architecture-hvrsd?file=/src/index.js https://i.stack.imgur.com/CkL4g.png https://i.stack.imgur.com/nDjuD.png By utilizing the divs ...
As I work on developing a Vue web component with vue-cli 3 and the --target wc option, I have encountered an issue. The vue-i18n plugin that I need to use requires certain options to be passed to the main Vue instance as shown below: new Vue({ i18n: n ...
I am facing an issue with astrouxds web components in my application. During testing, I am receiving a warning that needs to be resolved. Additionally, I need help on how to properly assert a value in the web component. console.error node_modules/vue/dis ...
Currently, I am developing a large-scale application using the innovative micro front end architecture. The application is split into 5 Micro Apps: (micro-app-A (developed in Vue), micro-app-B (built with Vue), micro-app-C (using Angular), micro-app-D (cre ...
Here is an example showcasing a custom web component called my-input. The goal is to establish a binding between the value attribute of this custom input component and the email attribute of a Vue instance. (Please note that this example may require Chrome ...
My attempt at creating a simple example using Google Polymer's platform.js is running into an error message that says: Uncaught TypeError: Cannot read property '_polyfilled' of undefined This is what I'm attempting to achieve: <current-date></cu ...
Recently, a question was raised on this platform regarding the use of Selenium to access the shadow DOM. Curious about this topic, I delved into the MDN article Using shadow DOM and decided to replicate the code on my local machine. Surprisingly, it worked ...
Providing context in hopes of finding an alternative solution to a larger issue. Situation Overview I am leading the development of a test automation framework for a web application that utilizes Web Components. The challenge arises when testing on Inter ...
<html> <style> body { color: blue; } </style> <body> <h1>Styles!</h1> <p>someone created a very general selector</p> <isolated-stuff></isolated-stuff> </body> <s ...
I am trying to create a custom tag using Kotlin that includes default content. While the example I found works well, I am having trouble adding default content (such as an input element) inside the custom tag. After attempting various approaches, I have o ...
I'm struggling to comprehend the purpose of ?= or $= in these two instances: First Example: Lit-Element README <div id="box" class$="${this.uppercase ? 'uppercase' : ''}"> <slot>Hello World</slot> </div> Second Example: PWA Ex ...
When initializing a component, I am facing an issue with setting up Shadow DOM based on the browser type (since IE does not support Shadow DOM). To handle this, I check if the browser is IE11 and then configure the encapsulation as Emulated for IE and Sha ...
I have a unique component structure for my website: <div (click)="popup.showAsComponent()"> <ng-content></ng-content> </div> Here is how I implement it: <my-web-component><button>Click!</button></my ...
Looking to implement an optional content projection feature in Angular. Here's the desired structure as an example: <app-root> <app-header></app-header> </app-root> By default, a header is displayed here. <app-root> ...
Currently, I am in the process of implementing a data-table element using custom elements (web components). Each row in the table can contain different types of cells such as text, number, date, etc. For example: <my-table> <my-table-cell-te ...
var divElement = document.createElement("div"); var innerHTMLText = "<div id='issue' is='if'> some content </div>"; divElement.innerHTML = innerHTMLText; document.body.appendChild(divElement); var newDivElement = document.querySelector("#issue" ...
Should I apply template in the constructor or connectedCallback of a custom element? In my experience, when I apply it in connectedCallback, sometimes attributeChangedCallback is called before and I can't query for elements. export class TestElement ...
While defining a UT for a component with an extended class using i8nService and ChangeDetectionRef, I encountered an error preventing me from instantiating it: Failed: Can't resolve all parameters for BrandingMultiselectComponent: (?, [object Object]). Er ...
I am currently working on a TypeScript component. component @customElement("my-component") export class MyComponent extends LitElement { @property({type: String}) myProperty = "" render() { return html`<p>my-component& ...
I am currently engaged in developing a straightforward application that coordinates multiple web components. Among these components, there is one that contains a setInterval function. Interestingly, the function continues to run even after the component it ...
Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc). <head> <link rel="stylesheet" href="core.css"> ... </h ...
As a newcomer to writing selenium tests, I am attempting to create an automated test for a carousel feature on our homepage. The objective is to click on one of the carousel navigation buttons and then confirm that a specific inline style has been applied ...
I am working on a component and I need to access some child nodes from the template. I was able to access the details div, but I'm not sure why the code is functioning as it does. Can someone please explain what the Future class does? Also, why is the fi ...
Is there a way to embed an existing React component into a StencilJS component without the need for multiple wrapper elements and manual element manipulation? I have managed to make it work by using ReactDom.render inside the StencilJS componentDidRender ...
Upon testing, I have found that writing CSS directly using nesting is effective. However, when used within a WebComponent and nested with the :host selector, it becomes invalid. Below is a demo code snippet showcasing this issue. My Chrome version number i ...
I'm currently working on integrating Stoplight into our vuepress site. This involves implementing a web component called elements-api provided by stoplight. Here's my progress so far: APIStopLight.vue <template> <main class="apis-page&q ...
I am seeking a more efficient method to manage all inputs within my lit component while minimizing the code usage. I am also employing Typescript in this process, utilizing @change=${this.handleInput} for all input fields. Below is an example of how the ha ...
I am currently developing a custom element that displays playing cards using SVG images as the background. I want to make sure that the background image changes whenever the attributes related to the card's suit or rank are updated. From what I under ...
I'm in the process of looking for effective ways to unit test my vanilla web components, and I've decided to give the Open-WC approach a try. However, I encountered the error mentioned above. my-component-test.js import { html, fixture, expect, } f ...
I have been experimenting with the new AngularElements feature which you can learn more about at https://angular.io/guide/elements. Initially, my tests were successful, but everything came to a halt when I integrated @ContentChildren. It makes sense to me ...
Long time no see, old friend. I am navigating to a Vue file that is asynchronously imported (via import) upon routing. The template for this file is shown below, mainly serving as a way to load in a heavier web component and create separation from that co ...