custom-element Questions

3

Solved

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

11

Solved

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...
Humphreys asked 2/2, 2023 at 16:50

3

Solved

This code gives an "Illegal Constructor" Error, can anybody tell me why? class MyCustomElement extends HTMLElement { constructor(){ super(); // Other things } } const myFunc = () =...
Tandem asked 19/5, 2020 at 0:7

5

Solved

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...
Rosewater asked 6/10, 2018 at 21:10

2

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...
Inexorable asked 29/11, 2022 at 12:48

8

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...
Romeo asked 16/1, 2019 at 7:0

3

Solved

So, in a library that I'm creating that uses custom elements, you obviously need to define the class in the CustomElementsRegistry before you may instantiate it. As of right now, this is being sol...
Signalman asked 12/12, 2017 at 19:0

4

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

10

Solved

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...
Clementius asked 6/12, 2014 at 17:25

2

I would like to use an anchor-element with a hash-URL inside of a custom element that uses shadow DOM. I would expect, that the browser scrolls down to that anchor, but it does not do it (at least ...
Thorazine asked 15/4, 2017 at 11:18

1

I am trying to implement a web custom element in typescript. I have found that the custom element gets its life cycle callbacks like connectedCallback() adoptedCallback() attributeChangedCallback(...
Vomitory asked 29/4, 2021 at 10:50

2

Creating a web component using svelte, I need to run some code when an attribute of the component is changed. What I have come up with is the following pattern. <script> export let test ...
Gantt asked 17/9, 2019 at 14:52

3

Solved

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

3

Solved

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...
Irreligion asked 7/9, 2017 at 13:1

4

Solved

I spent some time searching but have only seen too many regular "walk the DOM" blogs or answers that only go one level UP with getRootnode() Pseudo code: HTML <element-x> //# shadow...

3

Solved

CustomElement.svelte <svelte:options tag="custom-element" /> <script> import { onMount, onDestroy } from "svelte"; onMount(() => { window.addEventListener(&q...
Chronology asked 28/7, 2022 at 14:8

7

Solved

Is there a way to select all custom elements with CSS? I want to make all custom elements block elements by default (most browsers make them inline by default), and then override this as necessary....
Fowle asked 17/7, 2015 at 16:56

6

Solved

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

3

Solved

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}> `;...

3

Solved

TypeScript 2.1 Apparently now has support for writing custom html elements ("What's new in TypeScript - 2.1") However I have been unable to find any documentation on how this is supposed to work. ...
Selfabuse asked 11/12, 2016 at 11:27

2

Solved

I have a custom HTML tag <fancy-foo> that I would like to extend the functionality of. Some of the <fancy-foo> elements would be extended using the pretty-bar custom element, so that I ...
Pneumoconiosis asked 2/8, 2019 at 18:50

2

Solved

Is it possible to automatically or programmatically slot nested web components or elements of a specific type without having to specify the slot attribute on them? Consider some structure like this...
Anallise asked 23/12, 2020 at 10:53

7

I have created an Angular Web Component like below @Component({ selector: 'dlx-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.scss'], encapsulation: ViewEncaps...
Ambala asked 13/10, 2018 at 22:20

2

I'm trying to create a custom element with most of the javascript encapsulated/referenced in the template/html itself. How can I make that javascript from the template/element to be executed in the...
Blab asked 10/12, 2018 at 2:12

2

Solved

I'm trying to create web custom components using plain js. I would like to use rxjs and observables to fetch json content from a REST endpoint that I am also creating using python pyramid. However,...
Undercroft asked 18/8, 2019 at 13:22

© 2022 - 2024 — McMap. All rights reserved.