How do I create a custom element in dart?

Question

I am trying to make a custom element in dart. It should simply contain 2 buttons. It never actually makes it through the construction process...what am I doing wrong?

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

What's the problem? I don't have time just now to have a closer look but there are similar questions with answers here on SO already. — Günter Zöchbauer, May 07 '16 at 05:10

score 3 · Accepted Answer · edited May 23 '17 at 10:28

3

There are a few issues in your code.

Custom elements need to follow the naming rules that they need to have a - in their name
The element needs to be registered in order for the browser to be able to instantiate them
The setup(...) method you added wasn't called, therefore not caption was added to the button
Custom elements need to extend HtmlElement

DartPad example

See also:

edited May 23 '17 at 10:28

Community

1
1

answered May 07 '16 at 18:53

Günter Zöchbauer

623,577
216
2,003
1,567

Fixed everything. Thank you so much for the help! – Nick May 09 '16 at 16:28
Would you mind accepting the answer to make it clear your problem is solved (by clicking the checkmark below the up and downvote buttons. Thanks. – Günter Zöchbauer May 09 '16 at 16:42
This apparently doesn't work when in the context of tests, because the `registerElement` method seems to be disabled. Do you guys have the same problem? – Philippe Fanaro Aug 30 '20 at 14:45
What fo you mean with "disabled" perhaps the browser API changed. Custom Elements do have changed quite a bit since but I haven't used that Dart since then. – Günter Zöchbauer Aug 30 '20 at 16:28

How do I create a custom element in dart?

1 Answers1

Linked