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

Question

我正在尝试在飞镖中制作自定义元素。它应该只包含 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

另请参阅：

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

How do I create a custom element in dart?

element

web

dart