Dart 扩展输入元素

我扩展了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);
  }
}

导入'dart:html'；
void main（）{
document.registerement（'x-editor'，EditorBase，extenstag:'input'）；
文件登记册（“x项”，项目）；
}
类EditorBase扩展InputElement{
EditorBase.created（）：super.created（）；
}
类项扩展HtmleElement{
Item.created（）：super.created（）{
这个.createShadowRoot（）；
字符串模板=“”
'';
this.shadowRoot.appendHtml（模板）；
}
}

在我的html中，我有

<x-item></x-item> 

---

当我运行chromium writes

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

类项扩展HtmleElement{
final NodeValidatorBuilder\u htmlValidator=new NodeValidatorBuilder.common（）
..allowElement（'input'，属性：['is']）；
Item.created（）：super.created（）{
这个.createShadowRoot（）；
字符串模板=“”
'';
this.shadowRoot.setInnerHtml（模板，验证器：_htmlValidator）；
}
}
我真的不明白你需要什么。但我想为大家分享一个扩展输入元素的选项：

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}}">



你不需要制作阴影。但我不知道这对你有什么用