Extending input element

Issue

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{
  EditorBase.created():super.created();
}

class Item extends HtmlElement{

  Item.created():super.created(){
    this.createShadowRoot();
    String template = '<input  is="x-editor"></input>'
                      '<input  is="x-editor"></input>';
    this.shadowRoot.appendHtml(template);
  }
}

in my html i have

<x-item></x-item> 

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

Solution

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

  @override
  void attached() {
    super.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 *