Questions tagged [custom-element]

Custom Elements are a feature of HTML that provide a way for you to build your own fully-featured DOM elements and use them in your HTML markup, CSS stylesheets, and JavaScript code

Filter by
Sorted by
Tagged with
0 votes
2 answers
42 views

Trying to define a getter on custom HTMLInputElement

I'm trying to change what is returned when you access the value property on this custom element - which extends HTMLInputElement. This would be used for entering currency values. The input would show ...
1 vote
1 answer
50 views

How to detect events on child elements of custom element?

I'm trying to write a script that detects clicks on a button for a page the HTML of which I do not control. However, if I add an event listener on the document, the target of the event object is an ...
0 votes
1 answer
32 views

How do I set my event listener to capture an event through the shadow DOM?

I have a custom element which has a number of other custom elements in its shadow DOM. I want those child elements to react to an event the parent dispatches, so I set the composed flag to true, like ...
  • 49
1 vote
1 answer
32 views

HTML Custom Elements creation fails on Safari, custom method is not known

I create a custom button in my HTML JavaScript. While it works on Chrome like intended, it fails on Safari. Neither will the constructor be called, nor can I call the method "MyMethod" by my ...
3 votes
1 answer
53 views

why remove attribute API not working for "is" attribute alone?

var div = document.createElement("div"); var html = "<div id='issue' is='if'> some content </div>"; div.innerHTML = html; document.body.appendChild(div); var newDiv = document....
1 vote
1 answer
38 views

How to load a custom element in another Angular application(single page app)?

My index.html file of my shell app has a custom element called overview-cards-element which I have given in a script tag. http://localhost:8082/mfe1.js (It is the compiled js file). I'm unable to ...
  • 11
0 votes
1 answer
27 views

How can I get Custom Elements / Web Component names to be suggested by VS Code's Emmett / IntelliSense?

I've added a .html-custom-data.json file that's referenced correctly in the vscode -> settings.json, as hovering over a custom web component in HTML will display the description, and ctrl+space ...
0 votes
1 answer
31 views

Why is a declared javascript class I'm extending return console error: 'Uncaught ReferenceError: [superclass] is not defined'?

I'm trying to extend a class to take advantage of its quickAddItem methods. However, when I go to extend it into a new class, the console error Uncaught ReferenceError: QuickaddDrawer is not defined. ...
0 votes
0 answers
22 views

custom element: not able to extend HTMLProgressElement

I want to create a custom progress bar and extend from the native html progress bar. However, the console.log does not get called when I try to extend from the HTMLProgressElement <free-shipping-...
  • 101
0 votes
0 answers
26 views

Pass Icon-Class (e.g. Fontawesome) to a custom element written in Svelte

I wrote a custom element (web component) in Svelte and build it as web component to make it useable in other frameworks like Vue. The component is working but is rendered in a shadow-dom in production....
0 votes
0 answers
19 views

Problem with using template on customElement together with <slot>

I'm trying to learn more on how to work with customElements and looking in to using together with it. When I'm trying to use with and surrounding the by another element the DOM seems to no look as ...
0 votes
0 answers
30 views

Chrome Extension content script don't load Custom Element via Range.insertNode

I'm writing a Chrome Extension that injects my tiny app into the webpage. My small app was built with Vue as a Custom Element. I'm bundling the app into one file called custom-elements.js, and ...
  • 4,668
0 votes
0 answers
17 views

why angular elements needs to be created in an application but it does not works with a library module?

I was trying to export an angular element to use it in an arbitrary non framework project. You can export everything but nothing really happens when you import the script. But if you follow some ...
0 votes
1 answer
36 views

Why isn't this custom element centered vertically? [duplicate]

EDIT: Per the comments, it was unexpected that the <div> was ever centering - turned out to be a height thing, where the <div> was taking up the parent's full height, but the custom ...
0 votes
1 answer
47 views

Wix setAttribute in a forEach loop only firing once?

So I'm trying to send some data I fetched from my database to a Custom Element in Wix. To communicate, I used setAttribute and attributeChangedCallback of course. var fetchedData = await fetchData(); ...
6 votes
4 answers
2k views

How to use swiper 9 with angular

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 ...
0 votes
0 answers
38 views

Problem on Lightbox2, not working on shopify

I have a probelm, i have created a custom theme on Shopify and do all my stuff, but now i need to open some phots in a lightbox, i have noticed that if images are not processed the lightbox work, the ...
0 votes
1 answer
29 views

Define custom element within another custom element only

We know that we can register our custom element like this: customElements.define('x-my-element', MyElement); And now, this element is available like so: <x-my-element>Woo</x-my-element> ...
  • 157k
0 votes
0 answers
28 views

TorbenK/TK.CustomMap Xamarin Forms PIN not showing

Did anyone experience the following issue? The pin is nowhere to be found. there are very few samples out there and I can't find one that helps me resolve this issue. Literally, I copied and pasted ...
  • 651
0 votes
0 answers
23 views

customElements Bootstrap and Primeflex class names clash

I have an Angular App A, which I build using customElements to be used in Angular App B. The problem is that App A uses Primeflex and App B uses Bootstrap so that when I incorporate A in B, there will ...
  • 1
0 votes
2 answers
75 views

Long lines of text to show in a single line in scrolling text custom HTML element

I wanted to create a scrolling text banner custom HTML element. And I found the first example that is in this site(https://blog.hubspot.com/website/scrolling-text-css) does very close to what I want ...
  • 309
0 votes
1 answer
157 views

Blazor Custom element not working with Blazor Server and Angular

I created an app using Angular with ASP.Net core project template to work with Blazor Custom Elements in Blazor Server. I created the component and registered it as a custom element as suggested in ...
3 votes
1 answer
41 views

Trying to add an attribute called "key" to a custom element but React is removing it

I'm building a static site in React (using the Gatsby framework). The site is for a yoga studio and I need to embed a studio booking form widget onto a page. The widget is provided by a service called ...
0 votes
1 answer
80 views

Error event listeners not working on web components / custom elements

I'm trying to attach unhandledrejection and error event listeners to a web component. The goal is to have a general error handler for any error within the component. With the code below, listeners are ...
  • 611
1 vote
0 answers
162 views

Vue custom element as web component and vue component

I have a vue 3 app which builds some web components as custom elements. That works fine, I can define an html tag and use it in other apps and in my own vue app. I export the styles with the .ce.vue ...
  • 285
0 votes
0 answers
21 views

Angular html custom element from typescript [duplicate]

I'm a bit new to Angular and this problem seems nquite easy but I didn't find any solution on the web... Here is what I want : I have a component, named PageComponent (for example), and I want its ...
  • 31
0 votes
2 answers
59 views

is it possible to use slot with attachShadow for a textarea?

Is there some way of using <slot> with <textarea> when creating a custom shadowDom element? As per the standard (& I guess expected) textarea behaviour it's content is escaping <...
-1 votes
1 answer
489 views

Angular Problem with mat-form-field/mat-label

I started learning Angular Materials, and I have a problem with adding example from their site. To my html file I added: <mat-form-field class="example-form-field"> &...
0 votes
1 answer
68 views

How to override/proxy disconnectedCallback in Custom Web Components

I am trying to proxy the disconnectedCallback of any instance of a custom element. Here is a cut down version of trying to do that: const template = document.createElement("template"); ...
  • 405
0 votes
0 answers
43 views

Custom Web Elements / Lit Elements - Render child elements only when a parent element is present and way to transfer data among all child elements?

New to Stack Overflow and Lit. I'm building something using Lit and wanted to know how do I render element/s only if a parent element is present. I am trying to add a login element dependency which ...
0 votes
0 answers
32 views

How can the html custom element send data out?

I've been developing a React app with several functional components. Events in some of them trigger the other components. Therefore, I am using recoil to manage the global states. Now, I must define ...
  • 13
1 vote
1 answer
59 views

How to use ":host" (or ":host()") with ":has()"

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 ...
4 votes
1 answer
283 views

Use bootstrap css and other global css in Vue.js custom elements

No fancy webpack, simple Vue custom element with some global css and some inline css for overrides. I would like to use some styling library, like from getbootstrap.com and have it change styles ...
  • 3,728
3 votes
3 answers
139 views

Why do display:flex do not respect shadow root border?

If you toggle display:flex on a shadow root child it also affects the element outside. (All big browsers behave like this.) Why? There is a web component with a shadow root: <web-comp style="...
0 votes
2 answers
191 views

getElementById returning null when trying to access component from customElement

i created my own component that contains 2 inputs(type: range, number). I want to hide one of them after another checkbox is clicked but getElementById is returning null. Error This is in one js file ...
  • 11
1 vote
0 answers
52 views

Custom label elements associated to form controls via ElementInternals?

I'm writing a custom input element called fancy-input, which can participate in a form via the FormInternals API. In particular, the ElementInternals.labels property gives me a list of the label ...
  • 761
0 votes
0 answers
118 views

Use defineAsyncComponent with non-vue native web components

Is it possible to use defineAsyncComponent and dynamic <component> with non-vue native web components? Let's assume I have a web component, which was created with lit and now I want to use it ...
  • 4,255
0 votes
0 answers
8 views

Webpack, Custom Element, NPM

after build https://github.com/Shuu30/Submission-3.git help me please to solve this.. I want to resolve this error and I can move on to the next step
0 votes
1 answer
122 views

Slots are missing in custom defineCustomElement implementation

We are working in a web component library using Vue 3, TS and Tailwind. We are using a custom implementation for defineCustomElement macro, where @tony19 was able to give plugins support like vue-...
1 vote
1 answer
97 views

Why is the 2d plotly.js plot component divided into two separated svg after mounting the component from a htmlelement

I'm trying to wrap the Plotly.js React component inside Web Components. After mounting the plotly.js React component, the 2D plot is divided into two separatedmain-svgs, one for data and one for ...
  • 13
0 votes
1 answer
62 views

Import scss as text in Storybook

I'm setting up a webcomponents library (plain, not using lit or any other library) with typescript and scss, builds are done using esBuild. I splitted up the webcomponents to use a separate html and ...
  • 1,856
2 votes
1 answer
101 views

nested custom element not showing the data

im trying to make function that show all the movie from the themoviedb api with nested custom element but it doesn't appear on the web here the code for the custom element movie-container.js : ` ...
  • 23
0 votes
2 answers
139 views

Click event added to a button that is in a web component works only once

I have a class that contains three buttons that are used to navigate the app back and forth and so the content gets changed. However, the eventlisteners that I attempt to add to these three buttons on ...
0 votes
1 answer
40 views

How to add custom visual element for custom HTML element in TinyMCE 6

I have this HTML code: <p>Lorem ipsum...</p> <my-custom-tag></my-custom-tag> <p>...dolor sit amet...</p> In this case default behavior of TinyMCE is skip from ...
  • 5,027
1 vote
0 answers
103 views

Is it possible to increase specificity host selector shadow root custom element?

Hee everyone, I have the following page <!DOCTYPE html> <html> <head></head> <body> <style> @layer reset { * { ...
1 vote
1 answer
224 views

Unit tests of Angular Elements (registered with the CustomElementRegistry as a HTML Custom Element) pass individually but fail when run together

I'm using Angular Elements https://angular.io/guide/elements which allows me to create an angular component, define a tag name, and register it as a HTML Custom Element in the CustomElementRegistry ...
0 votes
0 answers
20 views

Vue.js version 2 ignore customElement that extends form using is= syntax

Vue.js version 2 is changing the original syntax of my native customElement and because of the change the browser will not render it on the page. Expected html on the DOM <form is="esm-...
  • 1,753
0 votes
0 answers
16 views

ngx-mask: NullInjectorError when I try to mask on CustomElement

I'm trying to create a mask in a Custom Element in Angular for an application in Blazor, when I run the application on the Angular server everything works, but on the Blazor server I get a ...
0 votes
0 answers
92 views

vue.js 2 use scoped slots in custom element

I'll try to explain my problem. I have a VueJS component, that uses slots in its template. For example: App.vue: <template> <div> <slot name="content" :content="...
  • 3,894
2 votes
4 answers
489 views

How to properly handle Javascript custom element (Web Component) with children elements?

I have a Custom Element that should have many HTML children. I had this problem when initializing it in class' constructor (The result must not have children). I understand why and know how to fix it. ...
  • 16.6k

1
2 3 4 5
19