Putting Multiple Web Components Classes Into One Library

Question

I'd like to define multiple web webcomponents inside one library. Like this:

library myapp;

import 'package:web_ui/web_ui.dart';

class Component1 extends WebComponent {
  int count = 0;
  void increment() {
    count++;
  }
}

class Component2 extends WebComponent {
  int count = 0;
  void increment() {
    count++;
  }
}

And then use them in a html file like this:

<script type="application/dart" src="myapp.dart"></script>

<element name="x-component1" constructor="Component1" extends="div">
  <template>
    <button on-click="increment()">Click me</button>
    <span>(click count: {{count}})</span>
  </template>
</element>

<element name="x-component2" constructor="Component2" extends="div">
  <template>
    <button on-click="increment()">Click me</button>
    <span>(click count: {{count}})</span>
  </template>
</element>

<div is="x-component1"></div>
<div is="x-component2"></div>

When I'm trying to run this program I'm getting:

No constructor 'Component1.forElement' declared in class 'Component1'.

My Question:

Is there a way to put multiple web component classes into one library? Cause it looks like right now every web component class must be defined in its own library.

Answer 1

I don't think there is a way to make this work at the moment. I opened: https://github.com/dart-lang/web-ui/issues/389 to track the bug.