Custom element wrapper

[agubler]

Type: feature

The following has been addressed in the PR:

• There is a related issue
• All code matches the style guide
• Unit or Functional tests are included in the PR

Description:

For custom elements that are written to deal with Dojo 2 custom element children only, add support for widget-core to treat them as widgets meaning that they can be authored without needing to add specific code to deal with custom elements.

Enabling usage as follows:

Using as a Dojo Widget:

class Example extends WidgetBase {

  private _onSelected(data: any) {
    console.log(data);
  }

  protected render() {
    return w(Menu, { onSelected: this._onSelected }, [
      w(MenuItem, { key: 'a', title: 'Menu Item A' }),
      w(MenuItem, { key: 'b', title: 'Menu Item B', selected: true }),
      w(MenuItem, { key: 'c', title: 'Menu Item C' })
    ]);
  }
}

Using as a Custom Element:

<demo-menu id="menu">
  <demo-menu-item id="a" title="Menu Item A"></demo-menu-item>
  <demo-menu-item id="b" title="Menu Item B"></demo-menu-item>
  <demo-menu-item id="c" title="Menu Item C" selected></demo-menu-item>
</demo-menu>
<script>
  a.data = { foo: 'bar' };
  menu.addEventListener('selected', function(event) {
    const detail = event.detail;
    console.log(detail);
  });
</script>

[agubler]

jsdoc

[agubler]

add some jsdoc

[kitsonk]

Just a question/random thought... for HNode and VNode we use symbols to tag the types, here we are using string enums. Conscious decision or unconscious?

[agubler]

It was conscious as an enum seemed more appropriate as part of a consumer API