Home/ Questions/Q 9024993
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T06:09:45+00:00

I’ve been following the Dart web-ui codelab. When I embed dart source code inside

  • 0

I’ve been following the Dart web-ui codelab. When I embed dart source code inside a web component .html file, I’m not getting any static analysis or autocomplete support in the Dart Editor (there’s an open bug for this http://code.google.com/p/dart/issues/detail?id=7449 ). Hence, I’m looking for a temporary workaround by using the src attribute.

According to the spec, the src attribute is supported for web components in Dart:
https://www.dartlang.org/articles/dart-web-components/spec.html#behavior. I tried linking to an external Dart library: given a foo.html web component for

<element name="x-foo-component" constructor="FooComponent" extends="div">

I’d like to link to a separate foo_embed.dart file in the same directory as my web component, which defines FooComponent, by adding: 

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

within foo.html. Following the spec’s suggestions, foo_embed.dart needs to be a Dart library, and would contain:

library foo_embed;
import 'package:web_ui/web_ui.dart';
class FooComponent extends WebComponent {
    ...
}

When I try this, running build.dart (from these instructions http://www.dartlang.org/articles/dart-web-components/tools.html) ends up only putting foo_embed.dart in out/ and there’s no out/foo.html.dart generated for importing in application.dart.

As expected, pasting the contents of foo_embed.dart as an inline script inside foo.html directly (as done in the codelab) works with build.dart, and I can launch my webapp in Dartium, so I don’t seem to have any other syntax problems in my project.

Do I probably have a simple syntax mistake somewhere? Or is this a temporary limitation of the Dart web components compiler? Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I can’t reproduce your problem.

    This works for me:

    lib/foo.dart

    library foo;

import 'package:web_ui/web_ui.dart';

class FooComponent extends WebComponent {
  var foo = 'asddfg';
}

    lib/foo.html

    <element name="x-foo" constructor="FooComponent" extends="div">
  <template>
    <input value="{{ foo }}" />
  </template>
  <script type="application/dart" src="foo.dart"></script>
</element>

    example/test.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="components" href="packages/foo/foo.html" />
  </head>
  <body>
    <x-foo></x-foo>

    <script type="application/dart">main() {}</script>
    <script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

    Then I open up Dartium and go to .../example/out/test.html and I see an input with the data bound to it properly.

    • 0