I am building a desktop app that monitors some things and generates data about what it is monitoring. When the user wants to interact with the data the app starts a very simple web server. The serv...

I have defined a custom element and I want to execute a script only when the custom element is upgraded to its registered type. The use case is that I must call a custom method. My main html file ...

I would like to use the CSS framework Bulma with LitElement. I know I can use an External Stylesheet However, they state it is bad practice to do it this way. I also have the problem that I had to ...

I'm working with a project that uses React and Typescript, but I want to start using native web components in my project to phase out some of my React components. I'm getting this error when I try...

I'm actually migrating to Angular 15 and saw that swiper 9 was out. It's written that a simple npm i swiper and that it should work, since Custom elements are supported in all major browser and by...

I'm creating a Vue web component using vue-cli 4.5.13 and the --target wc option. I also need the component to use the vue-i18n-next plugin (last version for vue 3 projects), which requires some op...

i am trying to build web components from react components, it is all working fine, but there are two problems i am trying to solve: Is there a way to convert such web components to pure web compon...

Say I have a native web component, and it has a slot: <slot id="CONTENT_SLOT" name="content"></slot> const CONTENT_SLOT = this.shadowRoot.getElementById("CONT...

I would like to make use of Lit-Element with Bootstrap. Currently I have simply imported the external dependancies as suggested here: https://lit-element.polymer-project.org/guide/styles#external...

I'm trying to find a way to encapsulate Javascript without using iframes. Ideally, I'd like a way to load external HTML components (widgets) on a parent page, without the two-step loading process, ...

since I updated Angular to version 17 I can't create web components.. I used to do it in app.module, where are they created now? I tried in app.component as the guide says but it doesn't seem to wo...

I have a project that has some script to build typescript web-component in it (here). I use rollup and typescript to build my web-components and my web-component file is like this: import HTML from...

Is there a way to change styles found in a shadow element? Specifically, extend/overwrite some properties found in a css class? I am using a chrome-extension called Beanote which hasn't been update...

I have created a web component and I referenced image from my asset folder in there as below <img src="./assets/bot.png" alt="{{botTitle}}" /> on local everything is fine, I published m...

What is the canonical way to import styles into a web component? The following gives me an error HTML element <link> is ignored in shadow tree: <template> <link rel="style" href="...

Shadow dom encapsulate css styles, selectors don't cross the shadow boundary. Question: How to use global common css styles in shadow dom? (suppose there are some common css styles which will be ...

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

I'm trying to use vanilla javascript to build a custom component which observes changes in all data attributes, e.g.: class MyComponent extends HTMLElement { static get observedAttributes () { r...

I'd like to export some of the components I use in my vue projects as web-component in order to be able to use them on other non-vue projects. I see that vue has support for this, and it exports we...

I have been trying to add image in react. I'm not using webpack, I'm using parceljs. Also using typescript I have try: import image from path/to/image.png <img src={image} /> inside react c...

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

I'm working with lit-elements via @open-wc and is currently trying to write a nested set of components where the inner component is an input field and some ancestor component has to support some ar...

Does anybody know how to use :host (or :host()) with :has() ? For example something like this: :host:has([disabled]) { opacity: 0.75; } or :host(:has([disabled])) { opacity: 0.75; } With the sy...

Our platform is built on a micro-frontend architecture with web components. We are using Stencil for some of them, this means we have multiple Stencil apps within one web page. Additionally, we hav...

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