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
缺陷：

扩展非HtmlElement（例如PreElement）抛出：

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

对registerElement使用extendsTag选项会抑制上述错误，但会导致＆＃34; new Element.tag（＆＃39; xxx＆＃39;）＆＃34;返回HtmElement的实例。

document.registerElement（＆＃39; xxx＆＃39;，XXX，extendsTag：＆＃39; pre＆＃39;）;

解决方案（假设扩展PreElement）：
使用＆＃39; document.registerElement（＆＃39; xxx＆＃39;，XXX，extendsTag：＆＃39; pre＆＃39;）;＆＃39;和＆＃39;新的Element.tag（＆＃39; pre＆＃39;＆＃39; xxx＆＃39;）;＆＃39;

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目前不支持库初始化。您必须在main。中调用document.registerElement。

使用1.14.0进行测试

在dart中扩展dart：html类

2 个答案: