Dart extension: html classes in dart

Question

I'm new to Dart, and I wonder if, for example, I can extend the DivElement class to create custom elements in one line of code. I am looking for something like this;

class RedBox extends DivElement {
    RedBox(text) {
        this.text = text;
        this.style.background = "red";
    }
}

RedBox myBox = new RedBox("Hello World");
document.body.append(myBox);

Of course, I will have much more complex elements with custom functions. But as a rule, is this possible?

When I try to run this, I get:

implicit call to super constructor 'DivElement()'

Answer 1

HTML-, . , , , RedBox.created, . created -, factory.

, document.registerElement.

:

class RedBox extends HtmlElement {
  RedBox.created() : super.created() {
    style.background = "red";
  }
  factory RedBox(text) => new Element.tag('my-redbox')..text = text;
}

document.registerElement('my-redbox', RedBox);

Answer 2

HtmlElement.
: https://api.dartlang.org/1.14.1/dart-html/HtmlDocument/registerElement.html
:

• non HtmlElement (, PreElement):

HierarchyRequestError: XXX PreElement HtmlElement SvgElement.

2. extendsTag registerElement , , " Element.tag('xxx" ) HtmElement.

document.registerElement('xxx', XXX, extendsTag: 'pre');

( PreElement):
'document.registerElement(' xxx ', XXX, extendsTag:' pre ');' 'new Element.tag(' pre ',' xxx ');'

void main{
  document.registerElement('xxx',
      XXX,extendsTag: 'pre');
      querySelectior('body').append(new XXX()..text = 'hello');
  }
  class XXX extends PreElement{
    XXX.created():super.created(){}
    factory XXX(){
      return new Element.tag('pre','xxx');
    }
  }

Dart . document.registerElement .

1.14.0