Category "web-component"

Polymer 1.x: Incompatible with native web-components?

(tl;dr - yes. However Polymer 2.0 is not and is an easy upgrade.) I am trying to migrate an old front-end code base away from polymer 1.11.3 (webcomponentsjs 0.

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 { Flow

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 { disp

How to Get the Contents of a Custom Element

I'm creating a custom element that will be able to convert its contents from markdown to HTML. However, I'm not able to get the contents of my custom elements.

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

React router component not destroying when user leaves the page

I have a video player (jsmpeg player) that opens up a websocket to a server to play live video. The way the video server works is that it counts the number of c

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>

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. &

Why does my shadow dom break my custom element?

Here is a JSFiddle demonstration of the custom element: https://jsfiddle.net/c4bLo097/5/ Here is the code from the fiddle: JavaScript: window.customElements.def

Dynamically Update Web Component Script Tag

I'm currently using Angular elements to generate web components for a project and I'm having issues figuring out a way to dynamically change the script version

How to encapsulate Angular app's global CSS within exported web component?

Goal I have an Angular 11 site with a large form component using Angular Material -- let's call it myExportableComponent. I want to use myExportableComponent i

Inject CSS styles inside of the shadow-root instead of the head tag | Vue.js & Webpack

I'm making an embeddable widget for websites using Vue.js and vue-custom-element. Everything was going smoothly until I ran into a problem. When I'm trying to u

litelement - how to compute style based on property or attribute values

I'm following the LitElement guide here but can't seem to get my custom element's style values calculated based on it's attribute. I want my element to be writ

Correct way to apply global styles into Shadow DOM

This questions is similar to some other on StackOverflow, but I couldn't find any answer describing applicable to my situation and non-deprecated method (and I'

How to integrate Tailwindcss into a VUE CLI 3 project's web component?

Here is what I have: A VUE ClI 3 Project with lots of components and stuff going on. What I need: Is a way to reuse this project and to include it on my clie

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 th

How to write a "Delayed" svelte component?

I'm trying to write a Svelte component that hides its slot during the time specified. For example, this next line should hide the paragraph during 3 seconds <

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 S

How to get element in user-agent shadow root with JavaScript?

I need get elements from Shadow DOM and change it. How i can do it? <div> <input type="range" min="100 $" max="3000 $"> </div>

Angular Elements - cannot pass variable to @Input property of my Elements Tag

I need some assistance here, I am unable to pass a variable to the @Input variable of my Elements tag. If I hard code a caller-id = "123456" inside the tag it w