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

【问题标题】：How do I create a custom element in dart?如何在飞镖中创建自定义元素？
【发布时间】：2016-05-07 00:12:26
【问题描述】：

我正在尝试在 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);
  }
}

【问题讨论】：

有什么问题？我现在没有时间仔细研究，但是这里已经有类似的问题和答案了。

标签： web dart element

【解决方案1】：

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

自定义元素需要遵循命名规则，它们的名称中必须包含-
需要注册元素才能让浏览器实例化它们
未调用您添加的 setup(...) 方法，因此未向按钮添加标题
自定义元素需要扩展HtmlElement

DartPad example

另见：

【讨论】：

修复了所有问题。非常感谢您的帮助！
您是否介意接受答案以明确您的问题已解决（通过单击向上和向下投票按钮下方的复选标记。谢谢。
这在测试环境中显然不起作用，因为 registerElement 方法似乎被禁用了。你们有同样的问题吗？
“禁用”是什么意思，也许浏览器 API 发生了变化。自那以后，自定义元素确实发生了很大变化，但从那以后我就没有使用过 Dart。