html - 如何在dart html中创建自定义元素

Question

我正在尝试在dart HTML中创建一个自定义元素，并且this答案显示了如何执行此操作，但是它使用了已弃用的API，所以我的问题是我今天该怎么做？
我的代码:

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

错误:

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)
    ...

Answer 1

ff ...这是一个很难的。

Document.registerElement是已弃用的API-请勿使用。 https://developer.mozilla.org/en-US/docs/Web/API/Document/registerElement

Dart的window.customElements.define已完成一半。对该API几乎没有兴趣，因此他们将其置于半断状态。

关于此的一些有趣的阅读:

https://github.com/dart-lang/sdk/issues/27311

https://github.com/jmesserly/dart-custom-element-demo

https://github.com/jmesserly/dart-custom-element-demo/pull/2

我对此的2美分是，您应该能够在原始浏览器API之上编写适当的JS互操作层，并从Dart使用它。但是，custom-element-demo仓库显示，执行此任务时需要注意一些事项。