在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()'

- Dafen

---

我认为这是你能够得到的最接近的答案。https://dev59.com/en7aa4cB1Zd3GeqPlRDC - Günter Zöchbauer

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

- Justin Fagnani

---

它必须扩展HtmlElement吗？它不能像问题中那样扩展DivElement吗？ - Daniel Robinson

你可以扩展DivElement，但仍需要有一个created()构造函数。通常扩展现有元素的唯一原因是利用特殊解析，这种情况下需要将其编写为<div is="my-redbox">。 - Justin Fagnani

Answer 2

关于扩展HtmlElement的一些注释。
示例: https://api.dartlang.org/1.14.1/dart-html/HtmlDocument/registerElement.html
陷阱：

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

HierarchyRequestError：自定义元素XXX是本地PreElement，应派生自HtmlElement或SvgElement。

2. 使用registerElement的extendsTag选项可以抑制上述错误，但会导致“new Element.tag('xxx')”返回HtmElement的实例。

document.registerElement('xxx', XXX, extendsTag:'pre');

解决方案（假设扩展PreElement）：
使用“document.registerElement('xxx', XXX, extendsTag:'pre');”和“new 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版本。

- TastyCatFood