Dart library layout with Web Component

Question

My program was working fine until it became necessary to build a library that used a custom web component. I can't understand what Dart is complaining about. It gives a warning saying it "cannot resolve my_library" which leads to the error, "No such type WebComponent". I based my attempt on this. Here's my code:

myapp.dart:

library my_library;

import 'dart:html';
import 'package:web_ui/web_ui.dart';

part 'fancyoption.dart';

void main() {
  // Enable this to use Shadow DOM in the browser.
  //useShadowDom = true;
}

myapp.html:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="myapp.css">
    <link rel="components" href="fancyoption.html">
  </head>
  <body>
    <h3>Type a color name into a fancy option textbox, push the button and 
    see what happens!</h3>

    <div is="x-fancy-option" id="fancy-option1"></div>
    <div is="x-fancy-option" id="fancy-option2"></div>
    <div is="x-fancy-option" id="fancy-option3"></div>

    <script type="application/dart" src="myapp.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

fancyoption.dart (in the same web/out directory):

part of my_library;

class FancyOptionComponent extends WebComponent {
  ButtonElement _button;
  TextInputElement _textInput;

  FancyOptionComponent() {
  }

  void inserted() {
    _button = this._root.query('.fancy-option-button');
    _textInput = this._root.query('.fancy-option-text');

    // make the background color of this web component the specified color
    final changeColorFunc = (e) => this.style.backgroundColor = _textInput.value;
    _button.onClick.listen(changeColorFunc);
  }
}

fancyoption.html:

<!DOCTYPE html>

<html>
  <body>
    <element name="x-fancy-option" constructor="FancyOptionComponent" extends="div">
      <template>
        <div>
          <button class='fancy-option-button'>Click me!</button>
          <input class='fancy-option-text' type='text'>
        </div>
      </template>
      <script type="application/dart" src="fancyoption.dart"></script>
    </element>
  </body>
</html>

I went sniffing around the generated Dart code in the web/out folder and noticed that the generated fancyoption.dart file was declaring itself as a library. I went back to my non-generated code and made the fancyoption.dart its own library and importing it from myapp.dart. This allowed the program to run without errors. Still, is this correct? Every web component should be its own library? — Phlox Midas
Yes, that's right. A web component is a stand-alone, reusable component, so fancyoption.dart shouldn't be part of the main app. — Chris Buckett
I have the same problem. Declared main.dart as part of mylib. But web/out/main.dart declares 'library mylib;' and compiler complains it should be 'part of mylib;' and then a bunch of errors. — Y2i

daftspaniel daftspaniel · Accepted Answer · 2013-09-11T09:47:12

The correct answer was posted in a comment - reposting Chris Buckett's response as an Answer for the benefit of future readers.

"A web component is a stand-alone, reusable component, so fancyoption.dart shouldn't be part of the main app."

Dart library layout with Web Component

1 Answers