co19_2 html tests should not use document.registerElement

[srujzs]

document.registerElement (or document.register in the dart:html library) has been deprecated and removed in Chrome 80. In order to replicate the same behavior, window.customElements.define is preferred instead. See https://developer.mozilla.org/en-US/docs/Web/API/Document/registerElement for more details.

This currently affects the following tests:

co19_2/LibTest/html/Element/attributeChanged_A01_t01
co19_2/LibTest/html/Element/enteredView_A01_t01
co19_2/LibTest/html/Element/leftView_A01_t01
co19_2/LibTest/html/Element/tagName_A01_t03
co19_2/LibTest/html/IFrameElement/IFrameElement.created_A01_t01
co19_2/LibTest/html/IFrameElement/tagName_A01_t03

The error looks like:

TypeError: receiver.registerElement is not a function
TypeError: receiver.registerElement is not a function
    at HtmlDocument.registerElement2  org-dartlang-sdk:///sdk_nnbd/lib/html/dart2js/html_dart2js.dart 17723:5
    at registerElement(inlined)       org-dartlang-sdk:///sdk_nnbd/lib/html/dart2js/html_dart2js.dart 10392:5
    at register(inlined)              org-dartlang-sdk:///sdk_nnbd/lib/html/dart2js/html_dart2js.dart 17729:12

[sigmundch]

We may want to remove some of these tests or switch to run the tests with the web_components polyfill that was used for browsers that didn't implement the API before it was spec-ed.

For context, CustomElements were implemented for Dart when the spec was at version 0.5. It was later noticed that the newer APIs required defining ES6 classes in a way that was not easily compatible with Dart, so we are not fully supporting the new API in Dart at this time.

I am not sure, but I don't believe window.customElements.define will work from Dart at this time.

[sigmundch]

Here is the issue describing our decision on not adding support for custom-elements v1 (dart-lang/sdk#27445)

[sgrekhov]

I'm trying to check if window.customElements.define will work or not, but unable to call it in a Dart code. This function signature looks like

void define (
String name,
Object constructor,
[Map options]
)

The second argument is a constructor. But you cannot tear-off a constructor in Dart. Closure also doesn't work

class Foo extends HtmlElement {
  Foo.created() : super.created();
...
  }
}

main() {
  var tag = 'x-foo';
  window.customElements.define(tag, () => new Foo.created());  // Error in JS. 'execute 'define' on 'CustomElementRegistry': The callback provided as parameter 2 is not a function.'
  ...
}

@sigmundch @srujzs , could you, please, advice how to use window.customElements.define in Dart correctly?

[srujzs]

I'll toy around to see if there's an alternative to this or if we should just remove tests if the functionality doesn't make sense anymore like @sigmundch suggested. I'll have to get back to you on this one.

[sgrekhov]

@srujzs any update on this?

[srujzs]

I haven't spent much time on this, but both you and @sigmundch is right that we can't supply a constructor here for define. Supplying the Dart custom type doesn't work either. I'm assuming you're seeing the error with your code sample because it's not wrapped with allowInterop, but doing so gives me a different error further downstream that I'll have to continue investigating.

[srujzs]

Spent a little more time on this, but I don't think there's any way to use define with dart:html. Supplying anything besides a constructor won't/shouldn't work regardless of if the callback allows interop, and since we can't do that, define won't work. This is unfortunate since with registerElement being deprecated, there is no way forward with registering a custom element. For lack of a better option here, these tests should be removed, or at least the parts which rely on registering a custom element removed.

[sgrekhov]

@srujzs thank you! I'll rewrite these tests

[sgrekhov]

This is unfortunate since with registerElement being deprecated, there is no way forward with registering a custom element.

@srujzs I don't see that document.registerElement() is deprecated in the current Dart API. I do see that document.register() is deprecated, but not registerElement(). May be simply use registerElement() instead of register()?

[srujzs]

I think that's just stale documentation at this point and dart:html hasn't been updated to reflect the deprecation changes since Chrome 80. The underlying registerElement native function no longer exists in any major browser: https://developer.mozilla.org/en-US/docs/Web/API/Document/registerElement. Therefore, neither register (which uses registerElement) nor registerElement/registerElement2 will work.

For the above tests, if the behavior that is being tested does not need to rely on custom elements to work (I can't really tell from a quick inspection), it may be still useful to have those tests but use something other than custom elements. I suppose one other alternative is using eval to define the custom element if we really do need it, but I'd stick with rewriting the tests that don't need custom elements for now. There might be several gotchas using eval to operate on custom elements so it's better to wait to do that. I see at least one of our own tests in tests/lib/html that test custom elements, so if we do refactor that one to use eval, it also might be easier for you to wait until then to refactor the co19 tests that need to use custom elements.

[sgrekhov]

All of these tests use deprecated API and were removed as part of #1405. Closed