Otdfbt

Multi tool use

Is my company merging branches wrong?

How do you cope with rejection?

Why is so much ransomware breakable?

Why does the U.S military use mercenaries?

Does the usage of mathematical symbols work differently in books than in theses?

on the truth quest vs in the quest for truth

How to customize the pie chart background in PowerPoint?

Should I twist DC power and ground wires from a power supply?

Could sodium in ethanol reduce amides to amines?

In Dutch history two people are referred to as "William III"; are there any more cases where this happens?

Lock out of Oracle based on Windows username

Can I get the output of a command line program with TeX (using e.g. read18)?

Who is frowning in the sentence "Daisy looked at Tom frowning"?

Was Tyrion always a poor strategist?

Managing heat dissipation in a magic wand

Why would company (decision makers) wait for someone to retire, rather than lay them off, when their role is no longer needed?

When did Britain learn about the American Declaration of Independence?

How to get all possible paths in 0/1 matrix better way?

Why does string strummed with finger sound different from the one strummed with pick?

Failing students when it might cause them economic ruin

Gambler's Fallacy Dice

How can sister protect herself from impulse purchases with a credit card?

How did Arya not get burned in S8E05, "The Bells"?

Save my secrets!

Create a custom input element

How do you disable browser Autocomplete on web form field / input tag?Create GUID / UUID in JavaScript?How do I detect a click outside an element?How do I check if an element is hidden in jQuery?Event binding on dynamically created elements?Creating a div element in jQueryHow to move an element into another element?Disable/enable an input with jQuery?How do I remove a particular element from an array in JavaScript?jQuery scroll to element

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

11

3

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'
);

<my-input type="text"></my-input>

What am I missing here?

javascript html custom-element

share|improve this question

edited May 7 at 9:05

Kévin Bibollet

2,4561725

asked May 6 at 8:45

dutzidutzi

1,0921714

add a comment | 

11

3

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'
);

<my-input type="text"></my-input>

What am I missing here?

javascript html custom-element

share|improve this question

edited May 7 at 9:05

Kévin Bibollet

2,4561725

asked May 6 at 8:45

dutzidutzi

1,0921714

add a comment | 

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'
);

<my-input type="text"></my-input>

What am I missing here?

javascript html custom-element

share|improve this question

edited May 7 at 9:05

Kévin Bibollet

2,4561725

asked May 6 at 8:45

dutzidutzi

1,0921714

class myInput extends HTMLInputElement ;

customElements.define('my-input', myInput, 
 extends: 'input'
);

<my-input type="text"></my-input>

class myInput extends HTMLInputElement ;

customElements.define('my-input', myInput, 
 extends: 'input'
);

<my-input type="text"></my-input>

class myInput extends HTMLInputElement ;

customElements.define('my-input', myInput, 
 extends: 'input'
);

<my-input type="text"></my-input>

share|improve this question

edited May 7 at 9:05

Kévin Bibollet

2,4561725

asked May 6 at 8:45

dutzidutzi

1,0921714

share|improve this question

edited May 7 at 9:05

Kévin Bibollet

2,4561725

asked May 6 at 8:45

dutzidutzi

1,0921714

edited May 7 at 9:05

Kévin Bibollet

2,4561725

edited May 7 at 9:05

Kévin Bibollet

2,4561725

asked May 6 at 8:45

dutzidutzi

1,0921714

asked May 6 at 8:45

dutzidutzi

1,0921714

1 Answer
1

active

oldest

votes

23

What you are expecting is not happening because that's not the correct way to extend an already built-in element.

As MDN documentation states, you need to keep the built-in tag in your DOM and affect it a is attribute.

Look at the snippet below by focusing on the spot input.

class spotInput extends HTMLInputElement 
 constructor(...args) 
 super(...args);
 
 this.addEventListener('focus', () => 
 console.log('Focus on spotinput');
 );
 
;

customElements.define('spot-input', spotInput, 
 extends: 'input',
);

<input type="text" placeholder="simple input">
<input is="spot-input" type="text" placeholder="spot input">

But I am guessing that you want to be allowed to use a <spot-input> tag. You can do that by attaching a shadow DOM, creating an autonomous element and append it a <input>.

class spotInput extends HTMLElement 
 constructor(...args) 
 super(...args);
 
 // Attaches a shadow root to your custom element.
 const shadowRoot = this.attachShadow(mode: 'open');
 
 // Defines the "real" input element.
 let inputElement = document.createElement('input');
 inputElement.setAttribute('type', this.getAttribute('type'));
 
 inputElement.addEventListener('focus', () => 
 console.log('focus on spot input');
 );
 
 // Appends the input into the shadow root.
 shadowRoot.appendChild(inputElement);
 
;

customElements.define('spot-input', spotInput);

<input type="number">
<spot-input type="number"></spot-input>

Then, if you check the DOM tree, you should have:

<input type="number">

<spot-input type="number">
 #shadow-root (open)
 <input type="number">
</spot-input>

share|improve this answer

edited May 6 at 21:02

dwirony

4,77231434

answered May 6 at 9:17

Kévin BibolletKévin Bibollet

2,4561725

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f56001693%2fcreate-a-custom-input-element%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

23

What you are expecting is not happening because that's not the correct way to extend an already built-in element.

As MDN documentation states, you need to keep the built-in tag in your DOM and affect it a is attribute.

Look at the snippet below by focusing on the spot input.

class spotInput extends HTMLInputElement 
 constructor(...args) 
 super(...args);
 
 this.addEventListener('focus', () => 
 console.log('Focus on spotinput');
 );
 
;

customElements.define('spot-input', spotInput, 
 extends: 'input',
);

<input type="text" placeholder="simple input">
<input is="spot-input" type="text" placeholder="spot input">

But I am guessing that you want to be allowed to use a <spot-input> tag. You can do that by attaching a shadow DOM, creating an autonomous element and append it a <input>.

class spotInput extends HTMLElement 
 constructor(...args) 
 super(...args);
 
 // Attaches a shadow root to your custom element.
 const shadowRoot = this.attachShadow(mode: 'open');
 
 // Defines the "real" input element.
 let inputElement = document.createElement('input');
 inputElement.setAttribute('type', this.getAttribute('type'));
 
 inputElement.addEventListener('focus', () => 
 console.log('focus on spot input');
 );
 
 // Appends the input into the shadow root.
 shadowRoot.appendChild(inputElement);
 
;

customElements.define('spot-input', spotInput);

<input type="number">
<spot-input type="number"></spot-input>

Then, if you check the DOM tree, you should have:

<input type="number">

<spot-input type="number">
 #shadow-root (open)
 <input type="number">
</spot-input>

share|improve this answer

edited May 6 at 21:02

dwirony

4,77231434

answered May 6 at 9:17

Kévin BibolletKévin Bibollet

2,4561725

add a comment | 

23

What you are expecting is not happening because that's not the correct way to extend an already built-in element.

As MDN documentation states, you need to keep the built-in tag in your DOM and affect it a is attribute.

Look at the snippet below by focusing on the spot input.

class spotInput extends HTMLInputElement 
 constructor(...args) 
 super(...args);
 
 this.addEventListener('focus', () => 
 console.log('Focus on spotinput');
 );
 
;

customElements.define('spot-input', spotInput, 
 extends: 'input',
);

<input type="text" placeholder="simple input">
<input is="spot-input" type="text" placeholder="spot input">

But I am guessing that you want to be allowed to use a <spot-input> tag. You can do that by attaching a shadow DOM, creating an autonomous element and append it a <input>.

class spotInput extends HTMLElement 
 constructor(...args) 
 super(...args);
 
 // Attaches a shadow root to your custom element.
 const shadowRoot = this.attachShadow(mode: 'open');
 
 // Defines the "real" input element.
 let inputElement = document.createElement('input');
 inputElement.setAttribute('type', this.getAttribute('type'));
 
 inputElement.addEventListener('focus', () => 
 console.log('focus on spot input');
 );
 
 // Appends the input into the shadow root.
 shadowRoot.appendChild(inputElement);
 
;

customElements.define('spot-input', spotInput);

<input type="number">
<spot-input type="number"></spot-input>

Then, if you check the DOM tree, you should have:

<input type="number">

<spot-input type="number">
 #shadow-root (open)
 <input type="number">
</spot-input>

share|improve this answer

edited May 6 at 21:02

dwirony

4,77231434

answered May 6 at 9:17

Kévin BibolletKévin Bibollet

2,4561725

add a comment | 

What you are expecting is not happening because that's not the correct way to extend an already built-in element.

As MDN documentation states, you need to keep the built-in tag in your DOM and affect it a is attribute.

Look at the snippet below by focusing on the spot input.

class spotInput extends HTMLInputElement 
 constructor(...args) 
 super(...args);
 
 this.addEventListener('focus', () => 
 console.log('Focus on spotinput');
 );
 
;

customElements.define('spot-input', spotInput, 
 extends: 'input',
);

<input type="text" placeholder="simple input">
<input is="spot-input" type="text" placeholder="spot input">

But I am guessing that you want to be allowed to use a <spot-input> tag. You can do that by attaching a shadow DOM, creating an autonomous element and append it a <input>.

class spotInput extends HTMLElement 
 constructor(...args) 
 super(...args);
 
 // Attaches a shadow root to your custom element.
 const shadowRoot = this.attachShadow(mode: 'open');
 
 // Defines the "real" input element.
 let inputElement = document.createElement('input');
 inputElement.setAttribute('type', this.getAttribute('type'));
 
 inputElement.addEventListener('focus', () => 
 console.log('focus on spot input');
 );
 
 // Appends the input into the shadow root.
 shadowRoot.appendChild(inputElement);
 
;

customElements.define('spot-input', spotInput);

<input type="number">
<spot-input type="number"></spot-input>

Then, if you check the DOM tree, you should have:

<input type="number">

<spot-input type="number">
 #shadow-root (open)
 <input type="number">
</spot-input>

share|improve this answer

edited May 6 at 21:02

dwirony

4,77231434

answered May 6 at 9:17

Kévin BibolletKévin Bibollet

2,4561725

class spotInput extends HTMLInputElement 
 constructor(...args) 
 super(...args);
 
 this.addEventListener('focus', () => 
 console.log('Focus on spotinput');
 );
 
;

customElements.define('spot-input', spotInput, 
 extends: 'input',
);

<input type="text" placeholder="simple input">
<input is="spot-input" type="text" placeholder="spot input">

class spotInput extends HTMLElement 
 constructor(...args) 
 super(...args);
 
 // Attaches a shadow root to your custom element.
 const shadowRoot = this.attachShadow(mode: 'open');
 
 // Defines the "real" input element.
 let inputElement = document.createElement('input');
 inputElement.setAttribute('type', this.getAttribute('type'));
 
 inputElement.addEventListener('focus', () => 
 console.log('focus on spot input');
 );
 
 // Appends the input into the shadow root.
 shadowRoot.appendChild(inputElement);
 
;

customElements.define('spot-input', spotInput);

<input type="number">
<spot-input type="number"></spot-input>

<input type="number">

<spot-input type="number">
 #shadow-root (open)
 <input type="number">
</spot-input>

class spotInput extends HTMLInputElement 
 constructor(...args) 
 super(...args);
 
 this.addEventListener('focus', () => 
 console.log('Focus on spotinput');
 );
 
;

customElements.define('spot-input', spotInput, 
 extends: 'input',
);

<input type="text" placeholder="simple input">
<input is="spot-input" type="text" placeholder="spot input">

class spotInput extends HTMLInputElement 
 constructor(...args) 
 super(...args);
 
 this.addEventListener('focus', () => 
 console.log('Focus on spotinput');
 );
 
;

customElements.define('spot-input', spotInput, 
 extends: 'input',
);

<input type="text" placeholder="simple input">
<input is="spot-input" type="text" placeholder="spot input">

class spotInput extends HTMLElement 
 constructor(...args) 
 super(...args);
 
 // Attaches a shadow root to your custom element.
 const shadowRoot = this.attachShadow(mode: 'open');
 
 // Defines the "real" input element.
 let inputElement = document.createElement('input');
 inputElement.setAttribute('type', this.getAttribute('type'));
 
 inputElement.addEventListener('focus', () => 
 console.log('focus on spot input');
 );
 
 // Appends the input into the shadow root.
 shadowRoot.appendChild(inputElement);
 
;

customElements.define('spot-input', spotInput);

<input type="number">
<spot-input type="number"></spot-input>

class spotInput extends HTMLElement 
 constructor(...args) 
 super(...args);
 
 // Attaches a shadow root to your custom element.
 const shadowRoot = this.attachShadow(mode: 'open');
 
 // Defines the "real" input element.
 let inputElement = document.createElement('input');
 inputElement.setAttribute('type', this.getAttribute('type'));
 
 inputElement.addEventListener('focus', () => 
 console.log('focus on spot input');
 );
 
 // Appends the input into the shadow root.
 shadowRoot.appendChild(inputElement);
 
;

customElements.define('spot-input', spotInput);

<input type="number">
<spot-input type="number"></spot-input>

share|improve this answer

edited May 6 at 21:02

dwirony

4,77231434

answered May 6 at 9:17

Kévin BibolletKévin Bibollet

2,4561725

edited May 6 at 21:02

dwirony

4,77231434

edited May 6 at 21:02

dwirony

4,77231434

answered May 6 at 9:17

Kévin BibolletKévin Bibollet

2,4561725

answered May 6 at 9:17

Kévin BibolletKévin Bibollet

2,4561725