web - 如何在 dart 中创建自定义元素？

Question

我正在尝试在 dart 中创建一个自定义元素。它应该只包含 2 个按钮。它从未真正通过施工过程......我做错了什么？

class GraphButton extends Element {
  factory GraphButton() => new Element.tag('GraphButton');
  ButtonElement colorBtn;
  ButtonElement removeBtn;

  GraphButton.created() : super.created() {

  }

  void setup(String buttonText) {
    text = buttonText;
    //initialize color btn
    colorBtn
      ..id = 'colorBtn' + text
      ..text = "colorSelector"
      ..onClick.listen(
          (var e) => querySelector('#output').text = id + 'button clicked!');

//initialize remove button
    removeBtn
      ..id = 'removeBtn' + text
      ..text = 'X'
      ..onClick.listen(
          (var e) => this.remove());

  //add to DOM
  this.children
  ..add(colorBtn)
  ..add(removeBtn);
  }
}

Answer 1

您的代码中存在一些问题。

自定义元素需要遵循命名规则，它们需要有一个 -以他们的名义

元素需要注册才能让浏览器实例化它们

setup(...)您添加的方法没有被调用，因此没有将标题添加到按钮

自定义元素需要扩展 HtmlElement

DartPad example

也可以看看:

Registering custom element in Dart lang

extendTag in Dart custom element