扩展dart :dart中的html类

Question

我对Dart很陌生，我想知道我是否可以扩展DivElement类，以便在一行代码中创建自定义元素。我在找这样的东西；

class RedBox extends DivElement {
    RedBox(text) {
        this.text = text;
        this.style.background = "red";
    }
}

RedBox myBox = new RedBox("Hello World");
document.body.append(myBox);

当然，我将有更复杂的元素与自定义函数。但总的来说，这有可能吗？

当我尝试运行这个时，我得到：

implicit call to super constructor 'DivElement()'

Answer 1

您可以扩展HTML元素，但是有一些需求。您现在遇到的问题是，您需要一个RedBox.created构造函数，它只能重定向到它的超类。created必须是唯一的生成构造函数，尽管可以添加工厂构造函数。

另一个要求是元素必须在document.registerElement中注册。

尝试添加以下内容：

class RedBox extends HtmlElement {
  RedBox.created() : super.created() {
    style.background = "red";
  }
  factory RedBox(text) => new Element.tag('my-redbox')..text = text;
}

document.registerElement('my-redbox', RedBox);

Answer 2

关于扩展HtmlElement的一些注意事项。

示例：https://api.dartlang.org/1.14.1/dart-html/HtmlDocument/registerElement.html

陷阱：

1. 扩展非HtmlElement(例如PreElement)抛出：

HierarchyRequestError:自定义元素XXX是一个本机PreElement，应该从HtmlElement或SvgElement派生。

1. 使用extendsTag选项和registerElement可以消除上述错误，但会导致“新建Element.tag('xxx')”返回HtmElement的一个实例。

document.registerElement('xxx'，XXX，extendsTag:'pre')；

解决方案(假设扩展PreElement)：

使用‘document.registerElement’(‘xxx’，XXX，扩展标签：‘pre’)；和‘新Element.tag’(‘pre’，'xxx');‘’

void main{
  document.registerElement('xxx',
      XXX,extendsTag: 'pre');
      querySelectior('body').append(new XXX()..text = 'hello');
  }
  class XXX extends PreElement{
    XXX.created():super.created(){}
    factory XXX(){
      return new Element.tag('pre','xxx');
    }
  }

Dart目前不支持库初始化。您必须主要调用document.registerElement。

用1.14.0测试