Stack Overflow
Stack Overflow

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

Custom Elements are natively supported in all browsers, but for browsers that don’t yet implement them natively, some support is available through the use of a JavaScript polyfill.

Latest changes in Javascript / Ecmascript 2017, allow you to easily create HTML custom elements in an OOP like fashion that makes your code clear and your HTML mark-up more intuitive.

See also:

For a gallery of available custom elements check out WebComponents

973 questions
207
votes
12 answers

Are custom elements valid HTML5?

I've been unable to find a definitive answer to whether custom tags are valid in HTML5, like this: Hello! I've found nothing in the spec one way or the other: http://dev.w3.org/html5/spec/single-page.html And custom tags don't…
d13
  • 9,817
  • 12
  • 36
  • 44
48
votes
10 answers

How to get list of registered custom elements

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 document.registerElement, but what else is there? Is it…
dy_
  • 6,462
  • 5
  • 24
  • 30
37
votes
4 answers

Failed to construct 'CustomElement' error when JavaScript file is placed in head

I have a custom element defined like so: class SquareLetter extends HTMLElement { constructor() { super(); this.className = getRandomColor(); } } customElements.define("square-letter", SquareLetter); When the JavaScript …
user7885142
37
votes
1 answer

Difference between constructor and connectedCallback in custom elements v1

I am new to web development and recently I have been seeing much debate and talks about Custom Elements v1. They allow you to define your own elements with their own custom behaviors and if Shadow DOM is used, with scoped styles. When I was…
Shashank
  • 503
  • 1
  • 5
  • 7
33
votes
1 answer

::slotted CSS selector for nested children in shadowDOM slot

The CSS ::slotted selector selects children of the element. However, when trying to select grandchildren like with ::slotted(*), ::slotted(*) *, or ::slotted(* *), the selector doesn't seem to take effect. class MyElement extends…
Mendy
  • 7,612
  • 5
  • 28
  • 42
31
votes
5 answers

Click event not firing when React Component in a Shadow DOM

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.Component { handleClick() { alert("Click…
josephnvu
  • 1,210
  • 1
  • 9
  • 14
30
votes
2 answers

How to listen for custom events defined web component

I have a custom element my-checkbox that wraps a checkbox, label, styling, etc. When that checkbox is toggled I am defining a CustomEvent named check within my constructor, like so: constructor(){ super(); this._shadowRoot =…
rakitin
  • 1,943
  • 6
  • 25
  • 51
26
votes
8 answers

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

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/dom-module.js:175:16 Tried deleting node-modules…
bhagya
  • 279
  • 1
  • 3
  • 4
26
votes
6 answers

Inheriting dimensions only if they are specified on the parent element

I'm developing a bunch of custom elements for an API using a web components polyfill and I've hit a snag. One of the elements may contain an or element. If no dimensions are specified for the custom element, it should be the default…
Andy E
  • 338,112
  • 86
  • 474
  • 445
25
votes
1 answer

Are Web Components actually useable in IE11 and Edge?

Web Components are the hot new thing, and a true web standard, everybody is talking about them and presumably using them, and they seemed like the perfect solution to a problem we have (sharing components across very different sites). So we build a…
mcv
  • 4,217
  • 6
  • 34
  • 40
23
votes
3 answers

can i pass function as attribute to web component?

I'm trying to create a native web component for input element. I wanted the component to have custom validation functionality, similar to polymer's paper-input custom validator function. I'm not sure if I can pass a custom validator function as…
PS.
  • 303
  • 1
  • 2
  • 8
22
votes
8 answers

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 almost every framework. But I'm a bit lost since I…
Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78
22
votes
2 answers

Are duplicate IDs allowed in separate shadow roots?

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? For example, consider this custom element: (function ()…
kamituel
  • 34,606
  • 6
  • 81
  • 98
22
votes
6 answers

How to communicate between Web Components (native UI)?

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 other way to communicate between two web components like…
Sandeep
  • 1,028
  • 2
  • 13
  • 25
22
votes
2 answers

Custom input element in native form

With web components one of the elements that people want to create and override most is . Input elements are bad because they are many things depending on their type and usually hard to customize, so it's normal that people always want to…
olanod
  • 30,306
  • 7
  • 46
  • 75
1
2 3
…
64 65