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

Answer 1

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:

• Registering custom element in Dart lang
• extendTag in Dart custom element