Category "web-component"

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

Main differences between lit-element & React [closed]

Looking into React code it seems more similar to "Lit-Element" code, Both can be used to create web components. It is very helpful if someone

What is the purpose for webcomponents-sd-ce-pf.js

I am building a webcomponent based application and I am eliminating unnecessary code in my bundles. To compile es5 elements, I've added the webcomponentsjs poly

WebComponents: how to get the resolved value of a slot in shadow DOM?

I have a web component and I want to adjust the value of its slot. Unfortunately, I am unable to get the resolved value from it. How can I do that? con

Web components with vaadin and rollup with svelte: Primary button ignores theme attribute

Maybe someone tried this before and is able to give me a hint. I have used normal svelte setup (mentioned in the main page) which scaffolds the app; npx degit s