Is it possible to position nested shadow DOMs on top of each other? With normal DOM, nested divs just stack by default: .d1 { width: 150px; height: 150px; background-color: lightseagreen; } ...

We have this custom element defined like so... <my-button> Submit </my-button> and the standard customElements definitions class MyButton extends HTMLElement{ constructor(){ supe...

Note: Existing questions exists here and elsewhere but they are all jQuery specific and there is no canonical answer covering plain JavaScript, including support for web components. I'd like to sim...

I'm writing a custom web component that is meant to be interactive. How can I tell the browser that this custom component should receive focus? I wish that my custom element… could be focused (b...

I'm very new to Lit and Web Components. I hope you can help me. I wrote the following Element: import {html, LitElement, PropertyValues} from 'lit'; import {customElement, property} from 'lit/decor...

I want to test the content of a slot in one of my custom components. If I use my component in an html-file and open it in an browser, everything works as intended. However if I want to automate my ...

I'm trying to use the font awsome js/svg library within a web component but the icon wont show. is this possible? I'm trying to implement an angular component inside an existing webforms project w...

What is a good way to apply styling dynamically (i.e. the value of styles are created at runtime) to HTML elements with JavaScript? I'm looking for a way to package a JavaScript widget (JS, CSS an...

Question has been updated I'm trying to use a Pinia's store with web components created with Vue.js but I have this error in the console: [Vue warn]: injection "Symbol(pinia)" not found ...

I am doing this Router tutorial. My App.jsx file: import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router' clas...

I would like to integrate web components into my react app. They define a set of custom events that the enclosing react app must listen to. According to the react docs: Events emitted by a Web ...

When creating Web Components with encapsulated styles using Shadow DOM, parts of the shadowed markup can be styled using the ::part pseudo selector (https://developer.mozilla.org/en-US/docs/Web/CSS...

Is it possible to automatically or programmatically slot nested web components or elements of a specific type without having to specify the slot attribute on them? Consider some structure like this...

I have created an Angular Web Component like below @Component({ selector: 'dlx-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.scss'], encapsulation: ViewEncaps...

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 use a component (with css) from a pack...

I'm facing some issues when rendering a React component into the shadow DOM of a webcomponent. I wrote a small piece of code to turn a React component into a webcomponent, but I want to render the...

I need to basically pass a value down to my web component, I will then do some random thing to it, now I want to pass that new value back up to my React Comnponent. How do I do that? function MyRea...

I'm using Web Components v1. Suppose two Custom Elements: parent-element.html <template id="parent-element"> <child-element></child-element> </template> child-element....

I want to start leveraging http://webcomponents.me W3C standard which is now supported by all major web browsers. I researched the internet and so far I found following frameworks: Stencil - Cre...

I would like to create a library of web components using Angular Elements that have default templates but allow developers to override the output. For example, consider a search-results component. ...

I have a created a small web component with the help of this article using angular element which includes @Input and @Output. I am able to pass data to @Input property but listening to the @Output...

I want to use few web components from https://github.com/microsoft/vscode-webview-ui-toolkit. But I don't know to how to use them in Svelte as svelte treats the web components as svelte components....

I'm exploring imports, templates, shadow DOM and custom elements in Chrome Canary (33.0.1712.3). In a grid layout I have a particular content element (region of the display) that will display diffe...

I am creating a web-component using VueJS 3, I want to expose a method on the component allowing the user to do something like this: <custom-component id="x1" /> <script> ...

I'm building a website with using only native, vanilla JS features (ES6, web components, import modules). I'd like to include a polyfill to get Safari to support extending HTML elements (class MyLi...