Расширения входного элемента

Question

я расширил HTML InputElement как следующий, и пытался сделать его с другим пользовательским элементом

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

в моем HTML я быть_наст

<x-item></x-item> 

, когда я запускаю хром пишет 2 Removing disallowed type extension <INPUT is="x-editor">

Answer 1

Я действительно не понимаю, что вам нужно. Но я хочу поделиться вам еще один вариант для расширения входного элемента:

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

Где-то в HTML:

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

Вам не нужно, чтобы сделать shadowDom. Но я не знаю, как это полезно для вас.

Answer 2

это сделало это, я не знаю почему хотя

class Item extends HtmlElement{ 

    final NodeValidatorBuilder _htmlValidator=new NodeValidatorBuilder.common() 
    ..allowElement('input', attributes: ['is']); 


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