how to create a custom element in dart html

Question

I am trying to create a custom element in dart HTML and this answer shows how to do so but it uses a deprecated API so my question is how can I do that today? my code:

class HelloWorld extends HtmlElement {
  static final tag = 'hello-world';
  factory HelloWorld() {
    var self = Element.tag(tag);
    var shadow = self.attachShadow({'mode': 'open'});
    shadow.children = [
      HRElement()..style.width = '50%',
      ParagraphElement()..text = 'hello world',
      HRElement()..style.width = '80%',
    ];
    return self;
  }
  HelloWorld.created() : super.created();
}

void main() {
  document.registerElement(HelloWorld.tag, HelloWorld);
}

the error:

Uncaught Error: Invalid argument(s): HelloWorld
    at Object.throw_ [as throw] (dart_sdk.js:3879)
    at Object._registerCustomElement (dart_sdk.js:98068)
    at HTMLDocument.[dartx.registerElement2] (dart_sdk.js:75054)
    at HTMLDocument.[dartx.registerElement] (dart_sdk.js:70020)
    at main$ (main.dart:19)
    ...

score 1 · Answer 1 · edited Jul 24 '20 at 13:09

Uff... This one is a hard one.

Document.registerElement is a deprecated API - don't use it. https://developer.mozilla.org/en-US/docs/Web/API/Document/registerElement
Dart's window.customElements.define is half done. There were little interest in this api, so they left it in half-broken state.

Some interesting reading regarding this:

My 2 cents on the issue is that you should be able to write a proper JS interop layer on top of vanilla browser APIs and use it from Dart. However, the custom-element-demo repo shows that there are some things one needs to pay attention to when undertaking such a task.

[Seth Ladd has an old post on this](http://blog.sethladd.com/2012/11/your-first-web-component-with-dart.html), maybe it's helpful. — Philippe Fanaro, Oct 24 '20 at 20:56

how to create a custom element in dart html

1 Answers1