Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at http://127.0.0.1:8000/components/@polymer/polymer/lib/elements/d...

I'm having difficulties with actions on elements in shadowroot in my test context. Lets say I have a web component <my-component /> and it contains a button <input id="my-button"...

I've created a web component by Vue 3, and also vuetify 3 has been used. The link contains the codes of project : vue-web-component When I run the command npm run build, the web component is built ...

While developing a Vue web component, the style is not applied to the web component, but added to the head of the document. This means that the style is ignored in the shadow DOM. Here is how I wra...

Within the connectedCallback() method of my custom element the textContent is returned as an empty string. Essentially my code boils down to the following... class MyComponent extends HTMLElement...

It's age-old common sense to start manipulating the DOM only once it's ready and we can be certain all the elements are available, and in the post-jQuery days we're all using the DOMContentLoaded e...

Is there a way to validate the type of the property that is decorated in Typescript? I would like a property decorator that only works on boolean class properties, but not on e.g. string (example b...

I'm trying to detect whether a custom element with a specific name was registered or not. Is there a way to make such check? Or is there a way to get list of registered custom elements? I do docu...

I am making a web component in Vanilla JS that use a hidden select in the background and a div and ul>li in front. It became a bit complex with fetching data from an api, ect, so I transitioned ...

I have a Vue web component. When I build it as a normal Vue component everything worked fine. However, it lost all the Tailwind styling immediately I converted it to a Vue Web Component. Thanks for...

I'm creating a Vue web component using vue-cli 3 and the --target wc option. I also need the component to use the vue-i18n plugin, which requires some options to be passed to the main Vue instance ...

Google's <model-viewer> provides all the key features I need without having write a custom solution via something like react-three-fiber or directly in three.js. I am struggling with how to p...

How i can get ownerDocument in script type="module"? <template> text </template> <script type="module"> let owner = document.currentScript.ownerDocument // is null...

class Form extends HTMLElement { constructor() { super() } connectedCallback() { console.log(this) console.log(this.innerHTML) } } customElements.define("my-form", Form); I'm t...

I'm building a small application, and planning to use web components (rather than use a UI library). I don't plan to use any bundlers etc., as this is going to be a small personal site. I would lik...

I have a web component x-counter, which is in a single file. const template = document.createElement('template'); template.innerHTML = ` <style> button, p { display: inline-block; } &lt...

My understanding is that data is passed to a custom html element via its attributes and sent out by dispatching a CustomEvent. JavaScript objects can obviously be sent out in the event's detail f...

I'm trying to create custom-element (web component) in svelte 3. I can't find any way to style nested components from css. Svelte removes styles before injecting them to <style> inside of Sha...

As alternative solution for https://github.com/vaadin/web-components/issues/5214 we now have styled some css parts in the shadow DOM of the avatar(-group). What I am wondering is: To what extend c...

I have a custom component that just shows a tarot card. Before the custom element I have defined a template. In my wc's connectedCallback I attached the template itself to the shadowroot and then s...

Most references as below mention that Safari partially supports web components. In detail, what web component features are not supported by Safari desktop and Safari iOS? Is there a technical docs ...

I have a custom component that should hide content when I set a boolean property to false. Every other property gets reflected except that one. I must be doing something wrong. static get properti...

CustomElement.svelte <svelte:options tag="custom-element" /> <script> import { onMount, onDestroy } from "svelte"; onMount(() => { window.addEventListener(&q...

I'm trying to use native web components for one of my UI project and for this project, I'm not using any frameworks or libraries like Polymer etc. I would like to know is there any best way or othe...

Can anyone tell me why I cannot use variables within lit-html's html method? const h1 = 'h1'; return html` <${h1} class="a-heading ${classes}"> <slot></slot> </${h1}> `;...