Extending input element


i extended the html InputElement as the following, and tried to render it with in another custom element

import 'dart:html';

void main() {
  document.registerElement('x-editor', EditorBase,extendsTag:'input');
  document.registerElement('x-item', Item);

class EditorBase extends InputElement{

class Item extends HtmlElement{

    String template = '<input  is="x-editor"></input>'
                      '<input  is="x-editor"></input>';

in my html i have


when i run chromium writes 2 Removing disallowed type extension <INPUT is="x-editor">


I don’t really understand what you need. But I wanna share for you one more option to extend input element:

import 'dart:html';
import 'dart:html_common';
import 'package:web_components/interop.dart';

class NumericInput extends InputElement {

  NumericInput.created() : super.created() { print('created!');}

  void attached() {
    print('Hi, it's is a NumericInput here!');

//call it in `main()`
registerNumericInput() => document.registerElement('x-input', NumericInput, extendsTag: 'input');

Somewhere in HTML:

<input is="x-input" value="{{number}}">

You don’t need to make a shadowDom. But I don’t know how it’s useful for you.

Answered By – kelegorm

Answer Checked By – Clifford M. (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *