Re: How to use custom elements (web components) with JsInterop and Elemental 2?

Solved!

Had to remind myself of having to assign my custom element to the window object, see https://github.com/gwtproject/gwt/issues/9500

.i.e in my HTML:

  customElements.define("my-app", MyApp);

   window.MyApp = MyApp; // This additional line is required

.. and in GWT I had to use name="MyApp", or rename class to MyApp

  @JsType(isNative = true, name="MyApp", namespace = JsPackage.GLOBAL)

  public class MyAppElement extends HTMLElement {

    ...

  }

On Thursday, April 27, 2017 at 2:36:06 PM UTC+2, Anders Forsell wrote:

Hello again,

I have a custom element defined in HTML and trying to communicate with it from GWT and with JsInterop.

Similar to how I can create a div element and cast it to the Elemental 2 HTMLDivElement, I have defined MyAppElement extending Elemental 2 HTMLElement

and using the same JsInterop annotations as for HTMLDivElement:

  @JsType(isNative = true, namespace = JsPackage.GLOBAL)

  public class MyAppElement extends HTMLElement {

    ...

  }

The following works fine:

    Element element = DomGlobal.document.createElement("div");

    HTMLDivElement divElement = (HTMLDivElement) element;

... but for my custom element I cannot cast it to MyAppElement:

    Element element = DomGlobal.document.createElement("my-app");

    MyAppElement myAppElement = (MyAppElement) element; // Throws ClassCastException

What am I missing?

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.