I'm using custom elements, which are very nice. But I'm facing a problem : When the connectedCallback() function is called, it seems that the node is not yet at its place in the DOM, thus I cannot...

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

I've been trying to make a custom HTML Element by extending the HTMLElement class. I try adding some style to it by linking a CSS file that is in the same directory as my other two files - index.ht...

I just ran into an interesting situation where I have a submit <button> inside the Shadow DOM of a native custom element that is placed inside a <form>. <form id="one" act...

I want to execute a defined class function from an Element inside my Web Component: customElements.define('first-component', class FirstComponent extends HTMLElement { constructor() { super(); ...

I try to detect a middle mouse button click on a HTML Custom Element by adding a listener for the auxclick-Event to it. As long as the page is not scrollable, this works totally fine in Chrome on a...

Is it possible to use Angular Elements generated from diffrent scripts? I have 2 projects weather-widget and clock widget which generates their own script(concated all required ones). When I use ...

I have several separated web components, made with angular elements, that I import in a main one, which has a router and is the base application. Routes are pretty simple: import { Component } fro...

I'm trying to figure out what's the deal with combining pseudo-elements with the ::slotted selector, looks like it works with some but not with others and I can't find any documentation listing the...

I have a special case where I need to encapsulate a React Component with a Web Component. The setup seems very straight forward. Here is the React Code: // React Component class Box extends React....

I created a Web Component class to extend div, and used customElements.define() to define it: class Resize_Div extends HTMLDivElement { constructor(){ super(); this.cpos = [0,0]; <etc.> ...

Consider this HTML template with two flat x-elements and one nested. <template id="fooTemplate"> <x-element>Enter your text node here.</x-element> <x-element> <x-elem...

I am looking into structuring vanilla web-components. I have previously used Polymer and like the fact that you can have the template, styles and JavaScript in one file for your component. I want t...

I'm using custom-elements aka web-components within Preact. The problem is that Typescript complains about elements not being defined in JSX.IntrinsicElements - in this case a check-box element: &...

I have copy & pasted to code from the Mozzila example https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements#Observed_attributes to files on my computer, and when i run it...

In the given html, how can I tell that a dom element is a standard html component defined by the browser or a web component defined in a script (by an author): <div></div> <custom-w...

Say if I want to create a custom element using shadow dom. Some elements in the template have class names specified in the linked css file. Now I want to let the css rules have effects on the eleme...

I'm trying to create a polyfill of sorts using the Custom Elements API for custom elements used by an in-game browser engine to display buttons and similar. However, I can't seem to access the elem...

tl;dr: Is it valid to have two elements with the same ID attribute, as long as both are under separate shadow roots? Would screen readers handle aria-labelledby correctly in such situation? F...

I'm trying to build a simple web component without any external dependencies. Just two html files, one index.html and one webcomponent.html. I have some personal html projects where I'd like to se...

I have been working through a yt tutorial on Web Components by Brad Traversy, a great teacher with great content, as I'm sure many of you already know :) I've gotten up to the 17 minute mark, thoug...

I have a normal Angular 10 application with lazy loaded modules and routing. However, I have a special requirement I need to fulfill. On most pages I want to initialize the full application with ro...

I have a custom element defined like so: class SquareLetter extends HTMLElement { constructor() { super(); this.className = getRandomColor(); } } customElements.define("square-letter", SquareL...

There are several ways a web component (autonomous custom elements only with regard to this question) can "come to life". Are there notable differences between the three options below? Op...

I have a custom HTMLElement that's working as intended, but I cannot find a way to pass arguments to the constructor; instead I'm accessing passing the values in my custom tag, but then I have to s...