1,041 questions
0
votes
3
answers
176
views
How can I know when a child element is created on a parent element?
I have three custom components, MyParentElement and MyChildElement1 and MyChildElement2:
class MyParentElement extends HTMLElement
{
connectedCallback()
{
console.log('MyParentElement ...
- 34
2
votes
0
answers
70
views
How to use :invalid selector with custom HTML
I have my custom HTMLElement that looks like this
export class MyCustomElement extends HTMLElement {
// ...
}
customElements.define("my-custom-element", MyCustomElement);
and my css
*[...
- 6,178
0
votes
0
answers
94
views
value setter for a custom select element with lazy loading
Edit ############
I had omitted the fact that this is an extension code, which seems a crucial information.
I have realized the problem is probably not caused by race of any of my functions but rather:...
- 559
1
vote
1
answer
177
views
Web Components: Slots are not working as (I) expected in light DOM
How can I change the following light DOM custom element to show the content of the default slot between (!!!) the two horizontal rulers?
Please be aware, that I cannot use shadow DOM in my use case.
&...
- 916
0
votes
2
answers
77
views
TypeScript support for vanilla custom element classes
I have an app with vanilla custom elements, like this:
class CardComponent extends HTMLElement {
static get observedAttributes() {
return ['header', 'text'];
}
constructor() {
super();
...
- 3,252
3
votes
0
answers
75
views
Import parent style into shadow DOM of custom element
I have a custom element, let's say it's called <cust-elem>. Assume that <cust-elem></cust-elem> renders to <a href="#">Foo</a>, but inside a shadow DOM.
Since ...
0
votes
1
answer
76
views
Clicking button doesn't submit form when the button is filled into a web component slot
I expect the two "forms" in the snippet below to behave the same when a <button> is clicked. A click on the button should submit the <form>. What I observe, however, is that it ...
- 78
0
votes
0
answers
59
views
Angular `NG0203 Error` for `StandAloneInjector` on trying to embed custom element into view container
Details:
I have two completely separate Angular applications. One is like parent one and other one is child.
Child should be exported as js module, loaded by parent app and embedded into some ...
- 11
1
vote
1
answer
115
views
How can I pass initial state data to a web component?
I'm creating a custom element and looking for a good way to pass in an object representing its initial state. I'm thinking my html would look something like this:
<my-component id="...
1
vote
0
answers
21
views
CSS @property in declarative shadow DOM [duplicate]
It is possible to use CSS' @property rule to define CSS variables like in the following example (https://codepen.io/sbhmn/pen/pvzmvvx):
<style>
@property --bg-color {
syntax: "*";
...
- 378
-3
votes
2
answers
65
views
Does attributeChangedCallback fire when a property is set programmatically?
If we define a property like this on a color-span custom element:
static get observedAttributes() {
return ['bgc'];
}
And get a reference to an instance like this while also changing the bgc ...
- 48.2k
1
vote
0
answers
233
views
Svelte without Shadow-Dom not possible?
How to build a Svele-Component without shadow-DOM?
There are a lot of discussions on GitHub
1748 (2018)
4073 (PR / 2019)
2516 (2019 / with Comment from Rich Harris, but he also had no clear answer)
...
- 1,195
0
votes
1
answer
235
views
How to query Shadow DOM instead of Light DOM for script appended to shadowRoot
I have a template that includes script content, all of which is attached to the shadow DOM of custom element. How to make this script query shadow DOM instead of Light DOM given it is part of the ...
- 3,245
0
votes
1
answer
70
views
How to move all Custom Element related into separate file to be imported & reused
I am having hard time to move all things related to custom element into separate file to be imported and reused. Here is simple custom element pc-coverflow-swiper created:
<template id="...
- 3,245
3
votes
0
answers
312
views
Best way to repeat <slot> content in a custom element
I have a custom element that shows a list, where each item is also a component.
One team builds the library components - they don't know what each record should look like. A different team uses them ...
- 157k
1
vote
0
answers
72
views
How to generate CEM from vue customElement
I am trying to create a webcomponent library based on vue component using defineCustomElement.
This is my test component
// Test.ce.vue
<template>
<button @click="onClick"&...
- 11
0
votes
1
answer
103
views
How to use a CSS variable inside a custom HTML element?
I have a custom HTML element I made that creates a repeating background pattern which I animate in. I need the ability to dynamically set the color of this pattern with a CSS variable that lives in ...
- 34.7k
1
vote
2
answers
260
views
Extending native HTML element in Angular 18
I created a node package for a Custom Element that I want to use in Angular and React. Therefor, in this library, I do not want specific Angular of React code.
My custom element is extending a button:
...
- 2,052
5
votes
4
answers
6k
views
How to properly manage a boolean signal input in a custom Angular element (v19)?
I have a web component created with Angular 19 prerelease version. It has a liked signal input, which can be set from a parent but can't be modified from within because signal inputs are read only. To ...
- 189
0
votes
1
answer
429
views
What's the proper way of creating a custom element/web component for tabulator 6.3 using svelte 5?
Tried creating a web component/custom element that would wrap a table from tabulatorjs using svelte, but for some reason can't get the table to properly display. I've followed the docs text and it ...
- 13
0
votes
3
answers
133
views
Why does CSS ::part override JavaScript element.style?
I have an HTML custom element that inherits from HTMLElement. The template contains:
<input type="text" part="input"/>
Sample CSS:
my-element::part(input) {
padding-...
- 747
1
vote
1
answer
173
views
Is it possible to slot the style of a shadowRoot?
I'm experimenting with Vanilla custom elements and it doesn't seem possible to slot a style tag:
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: "...
- 17.6k
2
votes
2
answers
371
views
Invalid name for HTML Custom Elements error
I'm trying to make an HTML page which has the list of all the anime I watched and am about to watch. So, I was trying to make an <anime> tag for convenience purpose. It has name and time ...
- 429
0
votes
0
answers
169
views
How to deploy a Blazor WASM custom element and call it from an spa application
I have created a custom element with blazor and I need to call it from another page, but I need to have this blazor custom element on a diferent domain, the problem is when I try to call it from ...
- 21
1
vote
3
answers
634
views
Angular custom elements keeps giving NullInjectorError
I really think I am really close, but I can't seem to get it to work. Probably something stupid.
What I try to do:
A client has a WordPress website and I want to embed a piece of Angular inside the ...
- 89
-1
votes
1
answer
100
views
Unable to nest basic vanilla web component
I have a set of basic web components made out of plain JS. Example:
Account.ts
class Account extends HTMLElement{
constructor(){
super();
this.innerHTML = '<p>My account</p>'...
- 8,663
0
votes
1
answer
1k
views
Seeking an appraoch to set ngCSPNonce or CSP_NONCE in Angular 18 for Angular Web Components/Custom elements?
I have written an Angular custom element like below
customElements.define('my-comp', createCustomElement(BasicComponent, config));
and will provide as js file after build using npm run build-elements ...
- 83
0
votes
0
answers
245
views
Angular 18 custom element without generating a component first
Given the following example in main.ts:
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app....
- 1,851
0
votes
1
answer
68
views
Binding Attribute of Custom HTML Element in Blazor
Is there a way to two-way bind an attribute of a custom HTML element in Blazor? I have a custom element with a value attribute linked to a text input internally that I'd like to bind the value of.
<...
- 17
0
votes
1
answer
68
views
Trying to create "auto-generating" component
So I'm trying to build this page in a very barebones geocities style server.
It lets me use some JS, so I was trying to build some component to do this idea I had, I have built this "blog" ...
- 1
3
votes
1
answer
389
views
iOS/OSx: CSS Nesting With Host Selector Not Working
CSS Nesting With :host Not Working On iOS/OSx
While I already solved this issue for myself with a workaround, I bring this up for two reasons...
I would like to know if this is actually a bug or not
...
- 10.1k
2
votes
1
answer
482
views
Implementing attributeChangedCallback in Typescript?
In this tutorial attributeChangedCallback is implemented like this:
// attribute change
attributeChangedCallback(property, oldValue, newValue) {
if (oldValue === newValue) return;
this[ property ]...
- 48.2k
0
votes
1
answer
74
views
Add event handlers like "onclick" or "onchange" as public class field on a customized built-in element
I have standard handlers for the click, input and change events of my customized HtmlInputElement.
I want to define these handlers like this:
class MyInputElement extends HTMLInputElement {
...
- 1,902
0
votes
0
answers
54
views
How do I instantiate this external script from inside a custom element?
Background: Building a Wix app, got a working calendar widget going on this test site but it can't link out after selecting dates due to Wix' iframe sandboxing. They said to use a custom element ...
- 113
0
votes
2
answers
251
views
Include attributes in document.createElement for custom elements
I'm trying to dynamically add a custom element I created, but it's not generating them properly.
div-item declaration:
class Item extends HTMLElement {
constructor() {
super();
...
- 31
0
votes
2
answers
161
views
Cross Browser alternatives for module IMPORT ASSERT options
With Chrome based browsers I would IMPORT a style sheet via: -
My component -
import sheet from '/Vanilla/ScrollGrid.css' assert {type: 'css'};
or calling user web page -
if (userStyles != undefined &...
- 1,505
1
vote
2
answers
473
views
Bootstrap js files not working in vue 3 options api custom element
I am trying to use Bootstrap 5 in a Vue 3 Options Api custom element. I have been having issues with loading bootstrap correctly.
This is my main.ts file:
import { defineCustomElement } from 'vue'
...
- 53
-1
votes
1
answer
418
views
Web Component attributeChangedCallback not called for DISABLED attribute
How can my custom-element / web-component detect a DISABLED attribute change?
static get observedAttributes() {
return ['checked', 'disabled', 'value'];
}
My attributeChangedCallback() is not ...
- 1,505
0
votes
0
answers
130
views
Exposing angular module as web component
I've been trying to expose some functionality of my app to third parties. I think it should be possible to achieve that. Here's what I've done:
Created another project in the same workspace, in there ...
- 95
1
vote
2
answers
238
views
Getting the closest parent which is a custom element
I have custom element which has an input element that is not a first grade child. I want to get the parent custom element from the input and I tried using input.closest() but it does not work with ...
- 410
0
votes
0
answers
38
views
CSS :where selector overrides :host selector [duplicate]
When I create a custom element like this:
customElements.define(
'my-custom-element',
class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ ...
- 1,622
1
vote
1
answer
116
views
Using a Web Component in a PopUp Window doesn't work in Firefox
TLDR
Adding a web component in a pop-out window works as expected in Chrome / Edge. But in Firefox, before I add the web component to the dom it's functioning, but just afterwards it reverts back to ...
- 21
0
votes
1
answer
75
views
How do custom HTML tags interact with cloning a template?
Here's the test case that I'm confused with. In html (in the end of body):
<template id="test">
<test-tag class="test-id"></test-tag>
</template>
In ...
- 1,662
0
votes
2
answers
94
views
Why can't I extend from a custom HTML element class conditionally?
The snippet below spits out an error that CustomElementParent is not defined when I try to extend from it in CustomElementChild.
When I remove the ! customElements.get('custom-element-parent') check, ...
- 1,149
1
vote
1
answer
69
views
Instantiating custom built-in element in JavaScript does not work
I've crafted a custom built-in element that recursively invokes itself. However, the child elements generated in JavaScript are not inheriting from the custom built-in element. Given that the initial ...
- 511
2
votes
1
answer
149
views
Change custom element content before and after attaching to the DOM
I created a custom HTML element that creates a new element from the following template:
<template id="track">
<div class="record">Nothing yet</div>
</...
- 133
0
votes
1
answer
233
views
How to listen for LightDOM Label "FOR=" events via ShadowDOM Custom Element
EDIT 1
@Danny (and everyone)
"Is there a reason your needs to be independent outside the Component? "
Please let me explain the use-case here. My custom-element ABC-TOGGLE is (wants to be) ...
- 1,505
0
votes
1
answer
163
views
JS CustomElements - Self 'registration' upon first instantiation
so I was looking for a way to setup an ES6 'abstract' base class for custom elements, which self-registers (window.customElements.define) upon the first instantiation of a child.
The approach I came ...
- 943
0
votes
1
answer
116
views
How to style a custom HTML element based on child node selector(s), using a shadow DOM attached stylesheet?
I have a custom HTML element which may group button elements:
<custom-element>
<button>Foo</button>
<button>Bar</button>
<button>Baz</button>
</...
- 9,290
0
votes
2
answers
337
views
FireFox events do not bubble or propagate from shadow to light DOM
EDIT 4
Ok, I hope this additional info seals it.
Firefox DOES bubble the synthetic CLICK that I generate on SPACEBAR / ENTER, but it DOES NOT bubble the mouse CLICK.
CHROME, OPERA, and EDGE work as ...
- 1,505