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
19
votes
1 answer

Failed to execute 'createElement' on 'Document': The result must not have children

I've been using custom elements v1 for a while now via a polyfill. Chrome 54 (the first version with a native v1 implementation) started throwing errors when initializing my elements: DOMException: Failed to execute 'createElement' on 'Document':…
Noah Freitas
  • 17,240
  • 10
  • 50
  • 67
19
votes
3 answers

Paths in Web Components are Relative to Root

I am creating a web component using native implementation, which in it's html template has links to images. However, those links only work if they are absolute, or relative to the main document, which means, that that component is not reusable, or…
Vlas Bashynskyi
  • 1,886
  • 2
  • 16
  • 25
17
votes
1 answer

How to Proxy Custom Element (Web Component)

class A extends HTMLElement { constructor() { super() return new Proxy(this, {}) } } window.customElements.define('a-element', A) How can i Proxy custom element? When i try it: Uncaught…
Артур Лаврищев
  • 240
  • 2
  • 9
17
votes
1 answer

What is the point of the "is" syntax when extending elements in web components?

In web components, to register an element you simply type: var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) }); To create an element you can do one of these: var xFoo = new…
Merc
  • 16,277
  • 18
  • 79
  • 122
16
votes
2 answers

How to execute a script when the custom element is upgraded

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 looks like…
Mildred
  • 463
  • 4
  • 13
15
votes
1 answer

Creating custom element without using class keyword

This is actually more a question about the object-orientation model in ES6. However I am going to use the creation of a new custom element as an example. So the new and shiny (as of today) method to create a new custom element is via…
Jeffrey04
  • 6,138
  • 12
  • 45
  • 68
15
votes
1 answer

What's the reason behind not allowing self-closing tag in custom element in spec?

tag are not allowed in HTML custom element. Why is that? Many cases just need void tag, I guess by that, code would be more readable. On the other hand, it implies semantic meaning more directly. Just like
, which by code …
Mehdi Raash
  • 8,721
  • 2
  • 29
  • 42
15
votes
1 answer

How to remove or unregister a registered Custom Element?

I'm currently testing the performance of Custom Elements, so I stumpled upon the need to unregister a previously registered element. I couldn't find anything about that. I think that could probably be needed, but before I have not researched this…
Patrick Hillert
  • 2,309
  • 4
  • 22
  • 37
14
votes
1 answer

Create a custom input element

I'm trying to create a custom component that extends the HTMLInputElement component, but nothing renders. class myInput extends HTMLInputElement {}; customElements.define('my-input', myInput, { extends: 'input' });
dutzi
  • 1,880
  • 1
  • 18
  • 23
14
votes
2 answers

Transpiling class based web components with babel

I've a simple web component following the latest web components v1 class syntax, it works great in Chrome and Firefox/Edge (with a polyfill) but I'd like it to run in IE11 so I need to transpile the class. However running it through babel produces…
Daaavvy
  • 333
  • 3
  • 10
14
votes
1 answer

Can I access custom html tag or contents

Let's say I want to create a custom html element such as: So I create a template like this:
etc..
Then I attach it to the page via an…
Sanborn
  • 289
  • 1
  • 2
  • 14
14
votes
1 answer

Composing v1 nested web components

I'm new to webcomponents. Since v1 of webcomponents is available, I'm starting there. I have read various posts around the web about them. I'm particularly interested in composing them correctly. I have read about slots and have them working,…
rob_hicks
  • 1,734
  • 3
  • 23
  • 35
13
votes
4 answers

Using web-components within Preact and typescript

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:
Simon
  • 2,686
  • 2
  • 31
  • 43
13
votes
3 answers

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry' (Polymer 2.0)

I'm facing this issue while running polymer init on polymer-cli. Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry'
navnit kapadiya
  • 179
  • 1
  • 1
  • 9
13
votes
2 answers

Custom Element class: this.getAttribute('data-*') returns null

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, i get null from every call to this.getAttribute. I…
Amalin
  • 315
  • 4
  • 11
1
2
3
…
64 65